Problemas ao carregar pontos no Google Maps

Eder Cuer · Março 2, 2015

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

Lucas Guima · Março 2, 2015

O que você acha que é o erro?

Veja que tem o arquivo e a linha onde ocorreu.

Eder Cuer · Março 2, 2015

Não faço ideia :upset:

O exemplo somente com a função de mostrar os marcadores funcionava, ocorreu o erro assim que eu tentei juntar os dois exemplos

Rafael Sirotheau · Março 2, 2015

A maioria desses problemas ocorre porque as funções estão sendo chamadas na ordem errada... Sendo assim, imagine que a func2 define uma variável, e a func1 faz uso dessa variável.

Se você chamar primeiro a func1(), a váriavel ainda não foi setada, sendo assim, está indefinida.

Qual é exatamente a linha 128 do mapa.js?

Outra dica... Para depuração, quando o código acusar undefined, verifique a linha do erro, e dê console.log() nas variáveis dessa linha para confirmar se os valores são os esperados

Eder Cuer · Março 3, 2015

Eae Rafael, valeu por responder.

A linha 128 é essa:

var markers = new google.maps.Markers({

Rafael Sirotheau · Março 4, 2015

Se está dando undefined ou você esqueceu de adicionar a API ao seu código ou ela ainda não foi carregada quando o seu código a esta chamando..

Tem certeza que você adicionou

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Antes do seu script?

Eder Cuer · Março 4, 2015

Eae Rafael, acabei de resolver aqui. Além de mudar a sequência eu mudei algumas variáveis, agora ta rodando bonitinho.

Código:

var map;
var mark;
var geocoder;
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();
    
    mark = new google.maps.Marker({
		
		draggable: false,
	});
    
}

initialize();

function abrirInfoBox(id, marker) {
	if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
		infoBox[idInfoBoxAberto].close();
	}

	infoBox[id].open(map, marker);
	idInfoBoxAberto = id;
}

function carregarPontos() {
	
	$.getJSON('js/pontos.php', function(pontos) {
		
		var latlngbounds = new google.maps.LatLngBounds();
		
		$.each(pontos, function(index, ponto) {
			
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
				title: "Meu ponto personalizado! :-D",
				icon: 'img/marcador2.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].marker = marker;
			
			infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
				abrirInfoBox(ponto.Id, marker);
			});
			
			markers.push(marker);
			
			latlngbounds.extend(marker.position);
			
		});
		
		var markerCluster = new MarkerClusterer(map, markers);
		
		//map.fitBounds(latlngbounds);
		
	});
	
}

carregarPontos();



$(document).ready(function () {

	
	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);
					mark.setPosition(location);
					map.setCenter(location);
					map.setZoom(14);
				}
			}
		})
	}
	
	$("#btnEndereco").click(function() {
		if($(this).val() != "")
			carregarNoMapa($("#txtEndereco").val());
	})
	
	$("#txtEndereco").blur(function() {
		if($(this).val() != "")
			carregarNoMapa($(this).val());
	})
	
	google.maps.event.addListener(mark, 'drag', function () {
		geocoder.geocode({ 'latLng': mark.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);
			mark.setPosition(location);
			map.setCenter(location);
			map.setZoom(14);
		}
	});
	
	

});

Valeu ai pela ajuda :)

Entrar

Arquivado

Problemas ao carregar pontos no Google Maps

Recommended Posts

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Sirotheau 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Sirotheau 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Cuer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante