Tema: Google Maps mostrar marcadores y enviar dirección para mostrarla
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 22/07/2013, 06:06
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 18 años
Puntos: 4
Respuesta: Google Maps mostrar marcadores y enviar dirección para mostrarla
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: 
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8" >
  5.    
  6.  
  7.  
  8. <!--[if gte IE 7]>
  9.   <link rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />
  10. <![endif]-->
  11. <link rel="stylesheet" media="screen and (max-width:4100px)" href="css/style.css">
  12. <link media="only screen and (max-device-width: 640px)" href="css/movil.css" type="text/css" rel="stylesheet" />
  13.  
  14.     <script type="text/javascript">
  15.     var contador = 0;
  16.     function funcion() {
  17.     for (var i=0;i < document.forms["comercios"].elements.length;i++) {
  18.     inpt = document.forms[0].elements[i];
  19.     if (inpt.checked) {
  20.     contador++;
  21.     }
  22.     }
  23.     if(contador >= 9) {
  24.     alert('Puedes crear tu ruta seleccionando un máximo de 8 establecimientos');
  25.     contador = 0;
  26.     return false;
  27.     }
  28.     }
  29.     </script>
  30.         
  31. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  32. <script type="text/javascript">
  33. var infowindow;
  34.         var bound;
  35.         var map;
  36.         var geocoder;  // importante incluirlo
  37.         
  38.         
  39.     (function () {
  40.  
  41.         google.maps.Map.prototype.markers = new Array();
  42.  
  43.         google.maps.Map.prototype.addMarker = function (marker) {
  44.             this.markers[this.markers.length] = marker;
  45.         };
  46.  
  47.         google.maps.Map.prototype.getMarkers = function () {
  48.             return this.markers
  49.         };
  50.  
  51.         google.maps.Map.prototype.clearMarkers = function () {
  52.             if (infowindow) {
  53.                 infowindow.close();
  54.             }
  55.  
  56.             for (var i = 0; i < this.markers.length; i++) {
  57.                 this.markers[i].set_map(null);
  58.             }
  59.         };
  60.     })();
  61.  
  62.     function pintarDirecciones(puntos, latitudCliente, longitudCliente) {
  63.         
  64.         bound = new google.maps.LatLngBounds(null);
  65.         //var latlng = new google.maps.LatLng(37.88909, -4.76125);
  66.         var latlng = new google.maps.LatLng(0, 0);
  67.         var myOptions = {
  68.             zoom: 10,
  69.             center: latlng,
  70.             mapTypeId: google.maps.MapTypeId.ROADMAP
  71.             //mapTypeId: google.maps.MapTypeId.SATELLITE
  72.         };
  73.  
  74.         
  75.         map = new google.maps.Map(document.getElementById("map"), myOptions);
  76.                 geocoder = new google.maps.Geocoder()   ;   
  77.  
  78.  
  79.         function createMarker(name, latlng) {
  80.             var image = "http://www.dondelocompro.es/img/nuevas/home/ico_pincho.png";
  81.             
  82.             var marker = new google.maps.Marker({ position: latlng, map: map, icon: image });
  83.             google.maps.event.addListener(marker, "click", function () {
  84.                 if (infowindow) infowindow.close();
  85.                 infowindow = new google.maps.InfoWindow({ content: name, width: 10, height: 50, maxWidth: 300 });
  86.                 infowindow.set("isdomready", false);
  87.                 infowindow.open(map, marker);
  88.             });
  89.             return marker;
  90.         }
  91.  
  92.         function createMarker2(name, latlng) {
  93.  
  94.             var marker = new google.maps.Marker({ position: latlng, map: map });
  95.             infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 100, maxWidth: 100 });
  96.             infowindow.set("isdomready", false);
  97.             infowindow.open(map, marker);
  98.             google.maps.event.addListener(marker, "click", function () {
  99.                 //if (infowindow) infowindow.close();
  100.                 
  101.                 infowindow = new google.maps.InfoWindow({ content: name, width: 100, height: 50, maxWidth: 100 });
  102.                 infowindow.set("isdomready", false);
  103.                 infowindow.open(map, marker);
  104.             });
  105.             return marker;
  106.         }
  107.  
  108.  
  109.  
  110.         var arrayPuntos = puntos.split("#");
  111.         var marca;
  112.         for (i = 0; i < arrayPuntos.length; i++) {
  113.             var punto = arrayPuntos[i].toString();
  114.             var punto1 = punto.split("$");
  115.             if (punto1.length > 2) {
  116.                 
  117.                 var lat = punto1[1].replace(",", ".");
  118.                 var lon = punto1[2].replace(",", ".");
  119.                 //var point = new GPoint(lon, lat);
  120.                 var latlng = new google.maps.LatLng(lat, lon);
  121.                 var nombre = punto1[0].toString();
  122.                 marca = map.addMarker(createMarker(nombre, latlng));
  123.                 //var marker = createMarker(point, nombre);
  124.                 bound.extend(latlng);
  125.                 //bounds.extend(marker.getPoint());
  126.                 //map.addOverlay(marker);
  127.                 //map.centerAndZoom(point, 0);
  128.             }
  129.             
  130.             //map.setCenter(point, 13);
  131.         }
  132.  
  133.         if (latitudCliente != "" && longitudCliente != "") {
  134.             var latlngCliente = new google.maps.LatLng(latitudCliente.replace(",", "."), longitudCliente.replace(",", "."));
  135.  
  136.             var nombreCliente = "Tu estás aquí.";
  137.             var marcaCliente = map.addMarker(createMarker2(nombreCliente, latlngCliente));
  138.             bound.extend(latlngCliente);
  139.         }
  140.         //alert("Hola0");
  141.         //map.setZoom(20);
  142.         if (arrayPuntos.length > 1) {
  143.             //alert(arrayPuntos.length.toString());
  144.             map.fitBounds(bound);
  145.         }
  146.         else {
  147.             //alert("Hola2");
  148.             //map.setZoom(10);
  149.         }
  150.         
  151.         
  152.         //Ajustar el zoom según los límites
  153.         //map.setZoom(map.getBoundsZoomLevel(bounds));
  154.  
  155.         //Centrar el mapa de acuerdo a los límites
  156.         //map.setCenter(bounds.getCenter());
  157.     
  158.  
  159.     }
  160. function codeAddress() {
  161.       geocoder = new google.maps.Geocoder();
  162.       var address = document.getElementById('address').value;
  163.       geocoder.geocode({
  164.         'address': address
  165.       }, function (results, status) {
  166.         if (status == google.maps.GeocoderStatus.OK) {
  167.           map.setCenter(results[0].geometry.location);
  168.           var marker = new google.maps.Marker({
  169.             map: map,
  170.             position: results[0].geometry.location
  171.           });
  172.           
  173.           infowindow = new google.maps.InfoWindow({
  174.         content:results[0].formatted_address + '<br/> Latitud: ' + results[0].geometry.location.lat() + '<br/> Longitud: ' + results[0].geometry.location.lng()});
  175.           infowindow.open(map, marker);
  176.         } else {
  177.           alert('Geocode no tuvo éxito por la siguiente razón: ' + status);
  178.         }
  179.       });
  180.     }
  181.  
  182.  
  183.  
  184. </script>
  185.     
  186. </head>
  187.  
  188.  
  189. <body>
  190.  
  191. <form action="negocios.php" method="POST" name="comercios" onsubmit="return funcion();">
  192. <div class="div_contenedor_fondo" >
  193.  
  194.  
  195.     
  196.  
  197.     <section>
  198.  
  199.             <div class="back" style="padding-left:10px;" align="top">
  200.  
  201.             <div class="mapa" style="padding-top:13px; height:100%;">
  202.                    <div id="map" style="width:97%; border:1px solid #00AEF4; height: 435px; color:#333333; font-family: Verdana, Arial, Helvetica, sans-serif; "></div> 
  203.  
  204.  
  205.                 <table width="97%"  class="formulario_arriba">
  206.                 <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>
  207.                 <tr><td>
  208.  
  209.  
  210.                   <table style="background-color:#EDEDED;" width="100%" cellpadding="0" cellspacing="0" border="0" style=" padding-top:10px;">
  211.                     
  212.                     <tr>
  213.                         <td valign="middle" style="padding:5px 0px 0px 0px;">&nbsp;
  214.                             <span  style="color:Black;font-weight:bold;">Tu dirección</span>
  215.                         </td>
  216.                         <td valign="middle" align="left" style="padding:5px 0px 0px 0px;">
  217.                                         
  218.                         <input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección" />
  219.       Latitud: <span id="x"></span>
  220.       <br />
  221.       Longitud: <span id="y"></span>                                                
  222. <input type="button" class="navi" value="Localizar" onclick="codeAddress();" >  
  223.                         </td>
  224.  
  225.                     </tr>
  226.                     <tr>
  227.                         <td ></td>
  228.                         <td align="left" >
  229.                             <table width="100%" border="0" cellpadding="0" cellspacing="0">
  230.                                 <tr>
  231.                                     <td width="20%" valign="top" style="padding:5px 0px 0px 0px;">
  232.                                         <span style="color:Black;">Ejemplo:</span> 
  233.                                     </td>
  234.                                     <td width="80%" align="left" valign="top" style="padding:5px 0px 0px 0px;">
  235.                                         <span  style="color:Black; ">C/ camino de los sastres, n 1, Córdoba</span>
  236.                                     </td>
  237.                                 </tr>
  238.                                 <tr>
  239.                                     <td colspan="2">&nbsp;</td>
  240.                                 </tr>
  241.                             </table>
  242.                         </td>
  243.                         <td ></td>
  244.                     </tr>
  245.  
  246.                 </table>
  247.             </td></tr>
  248.             </table>                                   
  249.             </div>
  250.  
  251.  
  252.     
  253.  
  254. </div>
  255. </section>
  256.             
  257.  
  258.  
  259.  
  260. </div>
  261. <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>
  262. </form>
  263. </body>
  264. </html>

Un saludo amigo y mil gracias, me esta ayudando mucho