Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

betodesign

[Resolvido] Google Maps - mudança

Por , em Javascript

Recommended Posts

betodesign    0

betodesign
Postado

Pessoal, estou com um script que gera um mapa do google puxando pelo endereço , gostaria de saber qual mudança preciso fazer para que este mapa comece a ser puxado pela LAT E LONG.

 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
/* <![CDATA[ */
var map;
var latlng;
var geocoder;
var address;
var lat;
var lng;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
var CITY_MAP_CENTER_LAT = '<?php echo $LATIDUDE; ?>';
var CITY_MAP_CENTER_LNG = '<?php echo $LONGITUDE; ?>';
var CITY_MAP_ZOOMING_FACT='13';
if(CITY_MAP_CENTER_LAT=='')
{
var CITY_MAP_CENTER_LAT = 34;	
}
if(CITY_MAP_CENTER_LNG=='')
{
var CITY_MAP_CENTER_LNG = 0;	
}
if(CITY_MAP_CENTER_LAT!='' && CITY_MAP_CENTER_LNG!='' && CITY_MAP_ZOOMING_FACT!='')
{
var CITY_MAP_ZOOMING_FACT = 13;
}else if(CITY_MAP_ZOOMING_FACT!='')
{
var CITY_MAP_ZOOMING_FACT = 3;	
}
 function initialize() {
   var latlng = new google.maps.LatLng(CITY_MAP_CENTER_LAT,CITY_MAP_CENTER_LNG);
   var myOptions = {
     zoom: CITY_MAP_ZOOMING_FACT,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP    };
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'zoom_changed', function() {
	//document.getElementById("zooming_factor").value = map.getZoom();

	});
setupEvents();
  // centerChanged();
 }

 function setupEvents() {
   reverseGeocodedLast = new Date();
   centerChangedLast = new Date();

   setInterval(function() {
     if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
       if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
         reverseGeocode();
     }
   }, 1000);
google.maps.event.addListener(map, 'zoom_changed', function() {
		//document.getElementById("zooming_factor").value = map.getZoom();
	});
}

 function getCenterLatLngText() {
   return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
 }

 function centerChanged() {
   centerChangedLast = new Date();
   var latlng = getCenterLatLngText();
   document.getElementById('latlng').innerHTML = latlng;
   //document.getElementById('geo_address').value = '';
   currentReverseGeocodeResponse = null;
 }

 function reverseGeocode() {
   reverseGeocodedLast = new Date();
   geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
 }

 function reverseGeocodeResult(results, status) {
   currentReverseGeocodeResponse = results;
   if(status == 'OK') {
     if(results.length == 0) {
       document.getElementById('geo_address').value = 'None';
     } else {
       document.getElementById('geo_address').value = results[0].formatted_address;
     }
   } else {
     document.getElementById('geo_address').value = 'Error';
   }
 }


 function geocode() {
   var address = document.getElementById("geo_address").value;



 if(address) {  
  var address = document.getElementById("geo_address").value;
   geocoder.geocode( { 'address': address}, geocodeResult);
}
 }

 function geocodeResult(results, status) {
 map.setCenter(results[0].geometry.location);
   if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
       position: results[0].geometry.location,
	draggable: true,
       map: map
   });
  addMarkerAtCenter(marker);

   } else {
     alert("Geocode was not successful for the following reason: " + status);
   }

}

 function addMarkerAtCenter(marker) {


updateMarkerAddress('Dragging...');
updateMarkerPosition(marker.getPosition());
geocodePosition(marker.getPosition());

google.maps.event.addListener(marker, 'dragstart', function() {
   	updateMarkerAddress('Dragging...');
   });

   google.maps.event.addListener(marker, 'drag', function() {
   	updateMarkerPosition(marker.getPosition());
   });

   google.maps.event.addListener(marker, 'dragend', function() {
   	geocodePosition(marker.getPosition());
  });



   var text = 'Lat/Lng: ' + getCenterLatLngText();
   if(currentReverseGeocodeResponse) {
     var addr = '';
     if(currentReverseGeocodeResponse.size == 0) {
       addr = 'None';
     } else {
       addr = currentReverseGeocodeResponse[0].formatted_address;
     }
     text = text + '<br>' + 'address: <br>' + addr;
   }

   var infowindow = new google.maps.InfoWindow({ content: text });

   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
   });
 }

 function updateMarkerAddress(str)
  {
 //document.getElementById('geo_address').value = str;
  }

 function updateMarkerStatus(str)
  {
 	 document.getElementById('markerStatus').innerHTML = str;
  }

 function updateMarkerPosition(latLng)
  {
 document.getElementById('geo_latitude').value = latLng.lat();
 document.getElementById('geo_longitude').value = latLng.lng();
 }

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
	latLng: pos
  }, function(responses) {
	if (responses && responses.length > 0) {
	  updateMarkerAddress(responses[0].formatted_address);
	} else {
	  updateMarkerAddress('Cannot determine address at this location.');
	}
  });
}

 function changeMap()
  {
	var newlatlng = document.getElementById('geo_latitude').value;
	var newlong = document.getElementById('geo_longitude').value;
	var latlng = new google.maps.LatLng(newlatlng,newlong);
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: CITY_MAP_ZOOMING_FACT,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP	  });

	var marker = new google.maps.Marker({
	position: latlng,
	title: 'Point A',
	map: map,
	draggable: true
  });

updateMarkerAddress('Dragging...');
updateMarkerPosition(marker.getPosition());
geocodePosition(marker.getPosition());

   google.maps.event.addListener(marker, 'dragstart', function() {
   	updateMarkerAddress('Dragging...');
   });

   google.maps.event.addListener(marker, 'drag', function() {
   	//updateMarkerStatus('Dragging...');
   	updateMarkerPosition(marker.getPosition());
   });

   google.maps.event.addListener(marker, 'dragend', function() {
   	//updateMarkerStatus('Drag ended');
   	geocodePosition(marker.getPosition());
  });

  }

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', geocode);

/* ]]> */
</script>

 

para abrir o mapa basta jogar issto no <body>

<div id="map_canvas" style="height:350px; position:relative; width:450px;>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vergil    15

Vergil
Postado

Colega, você postou no fórum errado. Se postar no fórum de javascript é mais provável que alguém lhe ajude. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Na verdade, o mapa e seus elementos são baseados em Lat/Lng. Quando você passa um endereço, ele geocodifica, ou seja, transforma em Lat/Lng para posicionar o mapa.

 

Basta você pular a etapa de transformar o endereço, defina o Lat/Lng e monte o mapa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado

Pessoal mesmo lendo a Documentacao do google, nao consegui ainda o que preciso pois nenhum exemplo de google map é igual esta funcao que tenho, que realmente é o q eu preciso, só precisava alterar este javascript para nao mais gerar o mapa pelo endereco e sim pela LAT E LONG

 

espero uma ajuda especifica

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Dizer que a documentação da API do Google Maps não tem conteúdo de apoio para você criar um LatLng é a mesma coisa que dizer que a documentação da API do YouTube não tem conteúdo para manipular um vídeo.

 

Eu já li a documentação e posso dizer que existe sim. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado

é porque eu nao estou ententendo, nao achei nada parecido com este codigo, e como ele ja esta pronto, nao posso pegar um exemplo lá no google e perder as funcionalidades do meu entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

A intenção não é apenas trocar seu código por um exemplo de lá. Você realmente não vai achar nada exatamente como precisa.

 

Diga-nos quais são as suas dúvidas que procuraremos auxiliá-lo. Ou então, sugiro procurar um profissional que tenha conhecimento na API.

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado

gostaria que vcs testassem este codigo e constatassem que ele nao gera pela lat e long e sim pelo endereco, queria tirar este vinculo prioritario ao endereco, mas quando eu tento alterar o codigo da erro

 

entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado

OLÁ amigo, acho q agora eu to quase aprendendo, peguei a demonstracao que preciso, o codigo abaixo está certinho, do jeito q eu preciso o unico problema é que agora o MARKER sumiu, o mapa esta centralizado, mas ele nao aparece com a marca (icone rosa do google) apontando, veja abaixo

 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
/* <![CDATA[ */
var map;
var latlng;
var lat;
var lng;
var centerChangedLast;
var CITY_MAP_CENTER_LAT = '-12.9125916';
var CITY_MAP_CENTER_LNG = '-38.3984960';
var CITY_MAP_ZOOMING_FACT='13';
if(CITY_MAP_CENTER_LAT=='')
{
var CITY_MAP_CENTER_LAT = 34;	
}
if(CITY_MAP_CENTER_LNG=='')
{
var CITY_MAP_CENTER_LNG = 0;	
}
if(CITY_MAP_CENTER_LAT!='' && CITY_MAP_CENTER_LNG!='' && CITY_MAP_ZOOMING_FACT!='')
{
var CITY_MAP_ZOOMING_FACT = 13;
}else if(CITY_MAP_ZOOMING_FACT!='')
{
var CITY_MAP_ZOOMING_FACT = 3;	
}
 function initialize() {
   var latlng = new google.maps.LatLng(CITY_MAP_CENTER_LAT,CITY_MAP_CENTER_LNG);
   var myOptions = {
     zoom: CITY_MAP_ZOOMING_FACT,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP    };

      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'zoom_changed');
setupEvents();
  // centerChanged();
  }






google.maps.event.addDomListener(window, 'load', initialize);


/* ]]> */
</script>

<div id="map_canvas" style="height:350px; position:relative; width:450px;border:1px solid #4d4d4d;"  class="form_row clearfix"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito