1
I’m using the Google Maps API to create Markers at addresses I report in the archive js
. Next to this API also has the autocomplete
to complete the address I’m typing on input
. The script is working perfectly, apart from the fact that I put the address of my home for example and click on marker
that is on top of my address, it pulls the latest information from the variable markers which contains the addresses. It pulls the information from the address of Valinhos .. Test the direct script on the website http://www.brasilpark.com.br/unidades . Put the address of your home for example, to understand what I’m talking about. Below the code js
that I’m using:
js map.
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);
});
});