Google Maps mostrar marcadores y enviar dirección para mostrarla

[franjgg]

Hola amigos,

Vereis necesito usar la api de google maps para mostrar una serie de marcadores que recibo desde la base de datos, la cosa es que ademas necesito que pueda introducir una direccion y me la muestre tambien en el mapa junto a los demas carcadores.

He estado buscando en algun ejemplo pero no veo nada asi, a ver si alguien conoce de algun ejemplo que pueda ver para echarle un ojo.

Un saludo amigos!!

[franjgg]

Nadie conoce algun ejemplo amigos!!

[txemaarbulo]

Hola franjgg de nuevo.

Para trasladar los marcadores desde una base de datos, la página oficial, muy completa, es https://developers.google.com/maps/a...lajax_v3?hl=es

Cuando dices "ademas necesito que pueda introducir una direccion y me la muestre tambien en el mapa junto a los demas carcadores" no sé si lo que quieres es que te muestre el nuevo marcador en ese momento o incluirlo en tu base de datos.

En el primer caso, https://developers.google.com/maps/d...overlays?hl=es Tienes muchas variables y ejemplos.

En el segundo, has de introducir la nueva ubicación en la base de datos y volver a llamarla.

Me vas contando los códigos que desarrolles y cómo te va.

Saludos.

[franjgg]

Hola de nuevo txemaarbulo, gracias por tu atencion y perdon por no explicarmen bien.

Lo que quiero decir es que aparte de que nos cargue los marcadores de la base de datos que esto ya esta funcionando, necesitaria que mediente un campo de texto podamos introducir nuestra direccino y nos la muestre en el mapa junto con los demas marcadores pero sin que la guarde en la base de datos.

Espero haberme explicado bien disculpa amigo,

Un saludo!!

[txemaarbulo]

Es algo muy parecido a lo que habíamos visto antes () pero con diferente función:

Por campo input: si tenemos las coordenadas, más fácil:

Código HTML:

<input type="text" id="xxx" value="37.890054, -4.778567" />
 

Código Javascript:

var mi_marcador_nuevo = document.getElementById('xxx').value;
 

Y después lo lanzamos:

Código Javascript:

var nuevomarker = new google.maps.Marker({
        map: map,
        position: mi_marcador_nuevo
      });
 

Si lo que va en el input es una dirección, tenemos que acudir a geocoder: básicamente es esto

Código Javascript:

function codeAddress() {
  var address = document.getElementById('xxx').value;
  geocoder.geocode({
    'address': address
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      document.getElementById('xxx').value = results[0].formatted_address;
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode no tuvo éxito por la siguiente razón: ' + status)
    }
  })
}
 

:
En este caso, la función function codeAddress() es llamada desde

Código HTML:

<input type="button" value="Localizar" onclick="codeAddress()">
 

Los códigos que te envío son muy de memoria y pueden contener algún error.
También tienes la posibilidad de añadir un nuevo marcador por click:

Código Javascript:

google.maps.event.addListener(map, 'click', function (event) {
        geocoder.geocode({
            'latLng': event.latLng
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    document.getElementById('xxx').value=results[0].formatted_address;
                    if (marker) {
                        marker.setPosition(event.latLng)
                    } else {
                        marker = new google.maps.Marker({
                            position: event.latLng,
                            map: map
                        })
                    }
                } else {
                    document.getElementById('mensaje').innerHTML = 'No se encontraron resultados'
                }
            } else {
                document.getElementById('mensaje').innerHTML = 'Geocodificación  ha fallado debido a: ' + status
            }
        })
    });
 

Tal vez lo más importante, es que metas tu nuevo marcador en una función aparte como te hice ya referencia.

[franjgg]

Amigo que tal,

Concretamente el codigo que uso para mostrar los marcadores es este:

Código HTML:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8" >
   
    <title>dondelocompro</title>
 
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />
<![endif]-->
<link rel="stylesheet" media="screen and (max-width:4100px)" href="css/style.css">
<link media="only screen and (max-device-width: 640px)" href="css/movil.css" type="text/css" rel="stylesheet" />
 
    <script type="text/javascript">
    var contador = 0;
    function funcion() {
    for (var i=0;i < document.forms["comercios"].elements.length;i++) {
    inpt = document.forms[0].elements[i];
    if (inpt.checked) {
    contador++;
    }
    }
    if(contador >= 9) {
    alert('Puedes crear tu ruta seleccionando un máximo de 8 establecimientos');
    contador = 0;
    return false;
    }
    }
    </script>
        
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var infowindow;
    var bound;
    var map;
    (function () {
 
        google.maps.Map.prototype.markers = new Array();
 
        google.maps.Map.prototype.addMarker = function (marker) {
            this.markers[this.markers.length] = marker;
        };
 
        google.maps.Map.prototype.getMarkers = function () {
            return this.markers
        };
 
        google.maps.Map.prototype.clearMarkers = function () {
            if (infowindow) {
                infowindow.close();
            }
 
            for (var i = 0; i < this.markers.length; i++) {
                this.markers[i].set_map(null);
            }
        };
    })();
 
    function pintarDirecciones(puntos, latitudCliente, longitudCliente) {
        
        bound = new google.maps.LatLngBounds(null);
        //var latlng = new google.maps.LatLng(37.88909, -4.76125);
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            //mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
 
 
 
        function createMarker(name, latlng) {
            var image = "http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png";
            
            var marker = new google.maps.Marker({ position: latlng, map: map, icon: image });
            google.maps.event.addListener(marker, "click", function () {
                if (infowindow) infowindow.close();
                infowindow = new google.maps.InfoWindow({ content: name, width: 10, height: 50, maxWidth: 300 });
                infowindow.set("isdomready", false);
                infowindow.open(map, marker);
            });
            return marker;
        }
 
        function createMarker2(name, latlng) {
 
            var marker = new google.maps.Marker({ position: latlng, map: map });
            infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 100, maxWidth: 100 });
            infowindow.set("isdomready", false);
            infowindow.open(map, marker);
            google.maps.event.addListener(marker, "click", function () {
                //if (infowindow) infowindow.close();
                
                infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 50, maxWidth: 100 });
                infowindow.set("isdomready", false);
                infowindow.open(map, marker);
            });
            return marker;
        }
 
 
 
        var arrayPuntos = puntos.split("#");
        var marca;
        for (i = 0; i < arrayPuntos.length; i++) {
            var punto = arrayPuntos[i].toString();
            var punto1 = punto.split("$");
            if (punto1.length > 2) {
                
                var lat = punto1[1].replace(",", ".");
                var lon = punto1[2].replace(",", ".");
                //var point = new GPoint(lon, lat);
                var latlng = new google.maps.LatLng(lat, lon);
                var nombre = punto1[0].toString();
                marca = map.addMarker(createMarker(nombre, latlng));
                //var marker = createMarker(point, nombre);
                bound.extend(latlng);
                //bounds.extend(marker.getPoint());
                //map.addOverlay(marker);
                //map.centerAndZoom(point, 0);
            }
            
            //map.setCenter(point, 13);
        }
 
        if (latitudCliente != "" && longitudCliente != "") {
            var latlngCliente = new google.maps.LatLng(latitudCliente.replace(",", "."), longitudCliente.replace(",", "."));
 
            var nombreCliente = "Tu estás aquí.";
            var marcaCliente = map.addMarker(createMarker2(nombreCliente, latlngCliente));
            bound.extend(latlngCliente);
        }
        //alert("Hola0");
        //map.setZoom(20);
        if (arrayPuntos.length > 1) {
            //alert(arrayPuntos.length.toString());
            map.fitBounds(bound);
        }
        else {
            //alert("Hola2");
            //map.setZoom(10);
        }
        
        
        //Ajustar el zoom según los límites
        //map.setZoom(map.getBoundsZoomLevel(bounds));
 
        //Centrar el mapa de acuerdo a los límites
        //map.setCenter(bounds.getCenter());
    
 
    }
 
</script>
    
</head>
 
 
<body>
 
<form action="negocios.php" method="POST" name="comercios" onsubmit="return funcion();">
<div class="div_contenedor_fondo" >
 
 
    
 
    <section>
 
            <div class="back" style="padding-left:10px;" align="top">
 
            <div class="mapa" style="padding-top:13px; height:100%;">
                   <div id="map" style="width:97%; border:1px solid #00AEF4; height: 435px; color:#333333; font-family: Verdana, Arial, Helvetica, sans-serif; "></div> 
 
 
                <table width="97%"  class="formulario_arriba">
                <tr><td colspan="2" style="background-color:#9DAAAE; padding:5px 0px 5px 10px;"> <span  style="color:#ffffff;font-weight:bold; font-size:10pt;">Crea tu ruta</span></td></tr>
                <tr><td>
 
 
                  <table style="background-color:#EDEDED;" width="100%" cellpadding="0" cellspacing="0" border="0" style=" padding-top:10px;">
                    
                    <tr>
                        <td valign="middle" style="padding:5px 0px 0px 0px;">&nbsp;
                            <span  style="color:Black;font-weight:bold;">Tu dirección</span>
                        </td>
                        <td valign="middle" align="left" style="padding:5px 0px 0px 0px;">
                        <input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección" />
                        <input type="button" class="navi" value="Localizar">                
                        </td>
 
                    </tr>
                    <tr>
                        <td ></td>
                        <td align="left" >
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="20%" valign="top" style="padding:5px 0px 0px 0px;">
                                        <span style="color:Black;">Ejemplo:</span> 
                                    </td>
                                    <td width="80%" align="left" valign="top" style="padding:5px 0px 0px 0px;">
                                        <span  style="color:Black; ">C/ camino de los sastres, n 1, Córdoba</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                        <td ></td>
                    </tr>
 
                </table>
            </td></tr>
            </table>                                   
            </div>
 
 
    
 
</div>
</section>
            
 
 
 
</div>
<script type='text/javascript'> pintarDirecciones('<table border=0 cellpadding=0 cellspacing=0><tr><td align="left"><h3> MORENO Y RUIZ FERRETERIA, C.B. </h3></td></tr><tr><td align="left"><h4>Nos encontrarás en:<br><br>C/ Don Carlos Romero (local) <br></h4></td></tr></table>$37.891223$-4.7620716#<table border=0 cellpadding=0 cellspacing=0><tr><td align="left"><h3>FARMACIA R. FERNANDEZ</h3></td></tr><tr><td align="left"><h4>Nos encontrarás en:<br><br>Jesus Rescatado, sn <br></h4></td></tr></table>$37.890656$-4.759926#<table border=0 cellpadding=0 cellspacing=0><tr><td align="left"><h3>CALZADOS GIRONA</h3></td></tr><tr><td align="left"><h4>Nos encontrarás en:<br><br>La Viñuela 20 <br></h4></td></tr></table>$37.8887746$-4.763007#','','');</script>
</form>
</body>
</html>
 

Tengo el formulario con el campo preparado pero no se como podria adaptarlo para que al introducir la direccin me mostrase la localizacion junto con los marcadores.

Un saludo y mil gracias amigo!!

[txemaarbulo]

Para adaptarlo (siempre sobre tu cógigo):
En HTML: llamamos a la función codeAddress()

Código HTML:

<input type="button" class="navi" value="Localizar" onclick="codeAddress();" >
 

En Javascript, dos pasos:
1º: declarqación de geocoder arriba

Código Javascript:

var infowindow;
        var bound;
        var map;
        var geocoder;  // importante incluirlo
 

2º, al final del javascript

Código Javascript:

function codeAddress() {
      geocoder = new google.maps.Geocoder();
      var address = document.getElementById('address').value;
      geocoder.geocode({
        'address': address
      }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          
          infowindow = new google.maps.InfoWindow({
        content:results[0].formatted_address + '<br/> Latitud: ' + results[0].geometry.location.lat() + '<br/> Longitud: ' + results[0].geometry.location.lng()});
          infowindow.open(map, marker);
        } else {
          alert('Geocode no tuvo éxito por la siguiente razón: ' + status);
        }
      });
    }
 

OBSERVACIONES:
- Verás que el mapa no se ajusta a todos los marcadores más la nueva dirección, por lo que se habrá de elegir un zoom más amplio o incluir el map.fitBounds(bound); con los marcadores y la nueva dirección;
- El uso de tabla ralentiza la página. Te sugiero trabajar mediante <div> y darles forma con CSS. (Se recomienda evitar el uso de tablas en todo lo posible)

[franjgg]

Amigo acabo implementar el codigo que me has pasado y la cosa es que cuando carga la pagina muestra los marcadores pero cuando meto la direccion y pulso solo muestra la direccion que se ha enviado pero no los marcadores

El codigo me quedo asi:

Código PHP:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8" >
   
 
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />
<![endif]-->
<link rel="stylesheet" media="screen and (max-width:4100px)" href="css/style.css">
<link media="only screen and (max-device-width: 640px)" href="css/movil.css" type="text/css" rel="stylesheet" />
 
    <script type="text/javascript">
    var contador = 0;
    function funcion() {
    for (var i=0;i < document.forms["comercios"].elements.length;i++) {
    inpt = document.forms[0].elements[i];
    if (inpt.checked) {
    contador++;
    }
    }
    if(contador >= 9) {
    alert('Puedes crear tu ruta seleccionando un máximo de 8 establecimientos');
    contador = 0;
    return false;
    }
    }
    </script>
        
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow;
        var bound;
        var map;
        var geocoder;  // importante incluirlo
        
        
    (function () {
 
        google.maps.Map.prototype.markers = new Array();
 
        google.maps.Map.prototype.addMarker = function (marker) {
            this.markers[this.markers.length] = marker;
        };
 
        google.maps.Map.prototype.getMarkers = function () {
            return this.markers
        };
 
        google.maps.Map.prototype.clearMarkers = function () {
            if (infowindow) {
                infowindow.close();
            }
 
            for (var i = 0; i < this.markers.length; i++) {
                this.markers[i].set_map(null);
            }
        };
    })();
 
    function pintarDirecciones(puntos, latitudCliente, longitudCliente) {
        
        bound = new google.maps.LatLngBounds(null);
        //var latlng = new google.maps.LatLng(37.88909, -4.76125);
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            //mapTypeId: google.maps.MapTypeId.SATELLITE
        };
 
        
        map = new google.maps.Map(document.getElementById("map"), myOptions);
                geocoder = new google.maps.Geocoder()   ;   
 
 
        function createMarker(name, latlng) {
            var image = "http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png";
            
            var marker = new google.maps.Marker({ position: latlng, map: map, icon: image });
            google.maps.event.addListener(marker, "click", function () {
                if (infowindow) infowindow.close();
                infowindow = new google.maps.InfoWindow({ content: name, width: 10, height: 50, maxWidth: 300 });
                infowindow.set("isdomready", false);
                infowindow.open(map, marker);
            });
            return marker;
        }
 
        function createMarker2(name, latlng) {
 
            var marker = new google.maps.Marker({ position: latlng, map: map });
            infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 100, maxWidth: 100 });
            infowindow.set("isdomready", false);
            infowindow.open(map, marker);
            google.maps.event.addListener(marker, "click", function () {
                //if (infowindow) infowindow.close();
                
                infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 50, maxWidth: 100 });
                infowindow.set("isdomready", false);
                infowindow.open(map, marker);
            });
            return marker;
        }
 
 
 
        var arrayPuntos = puntos.split("#");
        var marca;
        for (i = 0; i < arrayPuntos.length; i++) {
            var punto = arrayPuntos[i].toString();
            var punto1 = punto.split("$");
            if (punto1.length > 2) {
                
                var lat = punto1[1].replace(",", ".");
                var lon = punto1[2].replace(",", ".");
                //var point = new GPoint(lon, lat);
                var latlng = new google.maps.LatLng(lat, lon);
                var nombre = punto1[0].toString();
                marca = map.addMarker(createMarker(nombre, latlng));
                //var marker = createMarker(point, nombre);
                bound.extend(latlng);
                //bounds.extend(marker.getPoint());
                //map.addOverlay(marker);
                //map.centerAndZoom(point, 0);
            }
            
            //map.setCenter(point, 13);
        }
 
        if (latitudCliente != "" && longitudCliente != "") {
            var latlngCliente = new google.maps.LatLng(latitudCliente.replace(",", "."), longitudCliente.replace(",", "."));
 
            var nombreCliente = "Tu estás aquí.";
            var marcaCliente = map.addMarker(createMarker2(nombreCliente, latlngCliente));
            bound.extend(latlngCliente);
        }
        //alert("Hola0");
        //map.setZoom(20);
        if (arrayPuntos.length > 1) {
            //alert(arrayPuntos.length.toString());
            map.fitBounds(bound);
        }
        else {
            //alert("Hola2");
            //map.setZoom(10);
        }
        
        
        //Ajustar el zoom según los límites
        //map.setZoom(map.getBoundsZoomLevel(bounds));
 
        //Centrar el mapa de acuerdo a los límites
        //map.setCenter(bounds.getCenter());
    
 
    }
function codeAddress() {
      geocoder = new google.maps.Geocoder();
      var address = document.getElementById('address').value;
      geocoder.geocode({
        'address': address
      }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          
          infowindow = new google.maps.InfoWindow({
        content:results[0].formatted_address + '<br/> Latitud: ' + results[0].geometry.location.lat() + '<br/> Longitud: ' + results[0].geometry.location.lng()});
          infowindow.open(map, marker);
        } else {
          alert('Geocode no tuvo éxito por la siguiente razón: ' + status);
        }
      });
    }
 
 
 
</script>
    
</head>
 
 
<body>
 
<form action="negocios.php" method="POST" name="comercios" onsubmit="return funcion();">
<div class="div_contenedor_fondo" >
 
 
    
 
    <section>
 
            <div class="back" style="padding-left:10px;" align="top">
 
            <div class="mapa" style="padding-top:13px; height:100%;">
                   <div id="map" style="width:97%; border:1px solid #00AEF4; height: 435px; color:#333333; font-family: Verdana, Arial, Helvetica, sans-serif; "></div> 
 
 
                <table width="97%"  class="formulario_arriba">
                <tr><td colspan="2" style="background-color:#9DAAAE; padding:5px 0px 5px 10px;"> <span  style="color:#ffffff;font-weight:bold; font-size:10pt;">Crea tu ruta</span></td></tr>
                <tr><td>
 
 
                  <table style="background-color:#EDEDED;" width="100%" cellpadding="0" cellspacing="0" border="0" style=" padding-top:10px;">
                    
                    <tr>
                        <td valign="middle" style="padding:5px 0px 0px 0px;">&nbsp;
                            <span  style="color:Black;font-weight:bold;">Tu dirección</span>
                        </td>
                        <td valign="middle" align="left" style="padding:5px 0px 0px 0px;">
                                        
                        <input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección" />
      Latitud: <span id="x"></span>
      <br />
      Longitud: <span id="y"></span>                                                
<input type="button" class="navi" value="Localizar" onclick="codeAddress();" >  
                        </td>
 
                    </tr>
                    <tr>
                        <td ></td>
                        <td align="left" >
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="20%" valign="top" style="padding:5px 0px 0px 0px;">
                                        <span style="color:Black;">Ejemplo:</span> 
                                    </td>
                                    <td width="80%" align="left" valign="top" style="padding:5px 0px 0px 0px;">
                                        <span  style="color:Black; ">C/ camino de los sastres, n 1, Córdoba</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                        <td ></td>
                    </tr>
 
                </table>
            </td></tr>
            </table>                                   
            </div>
 
 
    
 
</div>
</section>
            
 
 
 
</div>
<script type='text/javascript'> pintarDirecciones('<table border=0 cellpadding=0 cellspacing=0><tr><td align="left"><h3> MORENO Y RUIZ FERRETERIA, C.B. </h3></td></tr><tr><td align="left"><h4>Nos encontrarás en:<br><br>C/ Don Carlos Romero (local) <br></h4></td></tr></table>$37.891223$-4.7620716#','','');</script>
</form>
</body>
</html>
 

Un saludo amigo y mil gracias, me esta ayudando mucho

[txemaarbulo]

En las observaciones te indicaba que se habrá de elegir un zoom más amplio.
Los marcadores anteriores los tienes (reduce manualmente el zoom para verlo).

Puedes variar el zoom al insertar una nueva dirección incluyendo en function codeAddress() map.setZoom(12); ó el nivel de zoom nuevo que quieras darle.

[franjgg]

Buenas amigo txemaarbulo,

Perdona mi torpeza, he añadido tal como me has indicado:

Código Javascript:

map.setZoom(15);
                    map.setCenter(bound.getCenter());
 

Y ahora funciona perfectamente.

Solamente me queda agradecerte enormemente la ayuda que me has prestado y darte mis puntos.

De nuevo mil gracias amigo!!

Funciona excelente.