Tema: Google Maps mostrar marcadores y enviar dirección para mostrarla
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 22/07/2013, 04:46
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 2 meses
Puntos: 4
Respuesta: Google Maps mostrar marcadores y enviar dirección para mostrarla
Amigo que tal,

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

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