I'm using the Google Maps API to create Markers in addresses I'm reporting to the js
file. Next to this API you also have autocomplete
of Google, to complete the address I'm typing in input
. The script is working perfectly, taking the fact that if I put the address of my house for example and click on marker
that is on top of my address, it pulls the last information of the variable markers that contains the addresses. It pulls the information from the valinhos address .. Test the script directly on the link site. Enter the address of your home, for example, to understand what I'm talking about. Here is the code js
I'm using:
mapa.js
var geocoder;
var map;
var marker;
var bounds = new google.maps.LatLngBounds();
var markers = [{"Estado":"Goiás","Cidade":"Goiânia","Bairro":"Jardim Goiás","Unidade":"CARREFOUR GOIÂNIA SUL","Endereco":"Avenida Deputado Jamel Cecílio, 3900 - Jardim Goías - Goiânia - GO","Lat":"-16.7093680","Lng":"-49.2325750"},{"Estado":"São Paulo","Cidade":"Valinhos","Bairro":"Jardim Maracanã","Unidade":"HOSPITAL E MATERNIDADE GALILEO","Endereco":"Av. Dr. Alfredo Zacarias, 1816 “ Jardim Maracanã - Valinhos “ SP","Lat":-23.0008593,"Lng":-46.99138019999999}]; //Tem vários endereços aqui
function initialize() {
var latlng = new google.maps.LatLng(-23.5557040,-46.6627530);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("mapa"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
var infoWindow = new google.maps.InfoWindow();
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i].Lat, markers[i].Lng);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i].Unidade
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<h1>'+markers[i].Unidade+'</h1>'+'<br /><br />'+markers[i].Endereco);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
}
$(document).ready(function () {
initialize();
function carregarNoMapa(endereco) {
geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
$('#txtEndereco').val(results[0].formatted_address);
$('#txtLatitude').val(latitude);
$('#txtLongitude').val(longitude);
var location = new google.maps.LatLng(latitude, longitude);
marker.setPosition(location);
map.setCenter(location);
map.setZoom(16);
}
}
})
}
$("#btnEndereco").click(function() {
if($(this).val() != "")
carregarNoMapa($("#txtEndereco").val());
})
$("#txtEndereco").blur(function() {
if($(this).val() != "")
carregarNoMapa($(this).val());
})
google.maps.event.addListener(marker, 'drag', function () {
geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#txtEndereco').val(results[0].formatted_address);
$('#txtLatitude').val(marker.getPosition().lat());
$('#txtLongitude').val(marker.getPosition().lng());
}
}
});
});
$("#txtEndereco").autocomplete({
source: function (request, response) {
geocoder.geocode({ 'address': request.term + ', Brasil', 'region': 'BR' }, function (results, status) {
response($.map(results, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
select: function (event, ui) {
$("#txtLatitude").val(ui.item.latitude);
$("#txtLongitude").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
map.setZoom(16);
}
});
$("form").submit(function(event) {
event.preventDefault();
var endereco = $("#txtEndereco").val();
var latitude = $("#txtLatitude").val();
var longitude = $("#txtLongitude").val();
alert("Endereço: " + endereco + "\nLatitude: " + latitude + "\nLongitude: " + longitude);
});
});