Problemas ao carregar pontos no Google Maps
Eae galera, peguei dois exemplos de mapas do google maps e tentei juntar (cáca a vista). Como não sou bom em Javascript deu zebra =/
Um exemplo era de auto completar e outro de carregar vários marcadores de um arquivo json. O auto completar funcionou bem mas assim que fui encorporar as funções de carregar os marcadores começou a apresentar o erro "Uncaught TypeError: undefined is not a function", esse erro eu identifiquei pelo console do Google Chrome.
Trecho do código onde aparece o erro:
function carregarPontos() {
$.getJSON('js/pontos.json', function(pontos) {
var latlngbounds = new google.maps.LatLngBounds();
$.each(pontos, function(index, ponto) {
var markers = new google.maps.Markers({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Meu ponto personalizado! :-D",
icon: 'img/marcador.png'
});
var myOptions = {
content: "<p>" + ponto.Descricao + "</p>",
pixelOffset: new google.maps.Size(-150, 0),
infoBoxClearance: new google.maps.Size(1, 1)
};
infoBox[ponto.Id] = new InfoBox(myOptions);
infoBox[ponto.Id].markers = markers;
infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(ponto.Id, markers);
});
markers.push(markers);
latlngbounds.extend(markers.position);
});
var markerCluster = new MarkerClusterer(map, markers);
map.fitBounds(latlngbounds);
});
}
carregarPontos();
Código Completo:
var map;
var geocoder;
var marker;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];
function initialize() {
var latlng = new google.maps.LatLng(-14.2400732, -53.1805018);
var options = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapa"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
draggable: true,
});
}
$(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(12);
}
}
})
}
$("#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(12);
}
});
$("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);
});
});
function abrirInfoBox(id, markers) {
if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
infoBox[idInfoBoxAberto].close();
}
infoBox[id].open(map, markers);
idInfoBoxAberto = id;
}
function carregarPontos() {
$.getJSON('js/pontos.json', function(pontos) {
var latlngbounds = new google.maps.LatLngBounds();
$.each(pontos, function(index, ponto) {
var markers = new google.maps.Markers({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Meu ponto personalizado! :-D",
icon: 'img/marcador.png'
});
var myOptions = {
content: "<p>" + ponto.Descricao + "</p>",
pixelOffset: new google.maps.Size(-150, 0),
infoBoxClearance: new google.maps.Size(1, 1)
};
infoBox[ponto.Id] = new InfoBox(myOptions);
infoBox[ponto.Id].markers = markers;
infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
abrirInfoBox(ponto.Id, markers);
});
markers.push(markers);
latlngbounds.extend(markers.position);
});
var markerCluster = new MarkerClusterer(map, markers);
map.fitBounds(latlngbounds);
});
}
carregarPontos();
Descrição do erro:
Uncaught TypeError: undefined is not a function mapa.js:128
(anonymous function) mapa.js:128
b.extend.each jquery.min.js:3
(anonymous function) mapa.js:126
b.Callbacks.c jquery.min.js:3
b.Callbacks.p.fireWith jquery.min.js:3
k jquery.min.js:5
jquery.min.js:5 b.ajaxTransport.send.r jquery.min.js:5
Discussão (6)
Carregando comentários...