PHP, MYSQL y Google MAP

afuentealba · #1 (**permalink**) 23/09/2013, 09:52

Estimados, buen dia.

Estoy utilizando el ejemplo de la pagina de desarrollo de google maps para poner marcadores en un mapa de direcciones sacadas en una base de datos.

https://developers.google.com/maps/a...lajax_v3?hl=es

Hasta aca impecable, me funciono tal cual el ejemplo...

...pero el ejemplo me obliga a conocer la latitud y longitud, y lo que necesito es hacer lo mismo pero solo con las direcciones (como cuando uno busca tradicionalmente en el google una direccion)

Alguna ayuda?

afuentealba · #2 (**permalink**) 23/09/2013, 10:22

Este es el codigo completo google

Código PHP:

  /* google map */ 
var customIcons = { 
      Publico: { 
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Privado: { 
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
    }; 
 
    function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng(-33.488798,-70.651178), 
        zoom: 13, 
        mapTypeId: 'roadmap' 
      }); 
      var infoWindow = new google.maps.InfoWindow; 
 
      // Change this depending on the name of your PHP file 
      downloadUrl("phpsqlajax.php", function(data) { 
        var xml = data.responseXML; 
        var markers = xml.documentElement.getElementsByTagName("marker"); 
        for (var i = 0; i < markers.length; i++) { 
          var name = markers[i].getAttribute("name"); 
          var address = markers[i].getAttribute("address"); 
          var type = markers[i].getAttribute("type"); 
          var point = new google.maps.LatLng( 
              parseFloat(markers[i].getAttribute("lat")), 
              parseFloat(markers[i].getAttribute("lng"))); 
          var html = "<b>" + name + "</b> <br/>" + address; 
          var icon = customIcons[type] || {}; 
          var marker = new google.maps.Marker({ 
            map: map, 
            position: point, 
            icon: icon.icon, 
            shadow: icon.shadow 
          }); 
          bindInfoWindow(marker, map, infoWindow, html); 
        } 
      }); 
    } 
 
    function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
        infoWindow.setContent(html); 
        infoWindow.open(map, marker); 
      }); 
    } 
 
    function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
          new ActiveXObject('Microsoft.XMLHTTP') : 
          new XMLHttpRequest; 
 
      request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
          request.onreadystatechange = doNothing; 
          callback(request, request.status); 
        } 
      }; 
 
      request.open('GET', url, true); 
      request.send(null); 
    } 
 
    function doNothing() {} 
/* end google map */

La parte interesante esta aqui:

Código:

/* google map */

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

/* end google map */

Lo que necesito es ingresar ahi, la direccion para que me genere el marcador creo

afuentealba · #3 (**permalink**) 23/09/2013, 10:57

Bien eh logrado ir avansado

Código:

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
		  
     geocoder.geocode( { 'address': address}, function(results, status) {
       var latpoint = parseFloat(results[0].geometry.location.lat());
       var lngpoint = parseFloat(results[0].geometry.location.lng());
       coords = latpoint + ', ' + lngpoint;
       alert(coords); //me arroja las coordenadas de las direcciones
     }); 
	     
         //aca las cambio por las decodificadas de arriba en lugar de las extraidas de la bd 
          var point = new google.maps.LatLng(
              parseFloat(markers[i].latpoint),
              parseFloat(markers[i].lngpoint));	

		
//antiguas de la bd, esta si las muestra pero son las de arriba las que quiero que muestre
  /*var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));*/

Me estoy acercando, pero no me muestra los puntos en el mapa, ayuda?

#4 (**permalink**) 24/09/2013, 05:34

Hola afuentealba:

Al salir de las llaves de la función

Código Javascript:

Ver originalgeocoder.geocode( { 'address': address}, function(results, status) {
  /* ... codigo ... */
});

pierdes el valor de las variables.

Prueba:

Código Javascript:

Ver originalgeocoder.geocode( { 'address': address}, function(results, status) {
       var latpoint = parseFloat(results[0].geometry.location.lat());
       var lngpoint = parseFloat(results[0].geometry.location.lng());
         //aca las cambio por las decodificadas de arriba en lugar de las extraidas de la bd 
          var point = new google.maps.LatLng(
              parseFloat(markers[i].latpoint),
              parseFloat(markers[i].lngpoint));
       alert(point); //me arroja las coordenadas de las direcciones
     });

Verás que he cambiado el lugar del cierre de llaves.
Y no utilices el mismo nombre de variable para las que geocodificas y las que llegan directamente de la base de datos por lat lng.

Código Javascript:

Ver original//antiguas de la bd, esta si las muestra pero son las de arriba las que quiero que muestre
  /*[B]var point[/B] = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));*/

están dentro de la función downloadUrl("phpsqlajax.php", function(data) { /* ... */ } y por eso te las reconoce.
Y no repitas var point Puedes poner point1 y pont2 o los nombres que quieras.

afuentealba · #5 (**permalink**) 24/09/2013, 07:54

Gracias viejo, ahora di cuenta de otro error, google no me permite consultar mas de geodecodificar 20 direciones, saliendome el error de "over_query_limit" por lo que voy tener que buscar la alternativa de solucion de descargar e insertar a la base de datos cientos de latitudes y longitudes, espero dar con una solucion para ello.

Gracias de igual forma