Carlos Robles frikiblog

Integrar Google Maps en Magento

| 1 Comment

Como siempre, habrá mil formas de hacerlo.

Para mi la más facil, sobre todo por la razón de que reutiliamos conocimiento, que es siempre es bueno, es crear el mapa de la forma habitual en un archivo html independiente, ponerle un nombre claro como por ejemplo mapa.html, y colocarlo donde nos guste, por ejemplo en la raiz.

El código podria ser algo como esto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={Nuestra key de la api de google}"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		var address="Direccion completa";
        var point;// = new GLatLng(51.453536, -0.906128);
///vilagreen.es/app/design/frontend/default/hellocorporate/template/contacts/
        var html = "HTML que queremos que salga en el Info Window";
		var geodecoder;


        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_NORMAL_MAP);

      

    
if (geocoder = new GClientGeocoder()) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 16);
var marker = new GMarker(point);

 
        GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); });

        map.addOverlay(marker);

        marker.openInfoWindowHtml(html);

}
}
);
}
 

        

 
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
 
    <div id="map" style="width: 600px; height: 375px"></div>
  </body>
</html>

Tenemos que incluir la direccion, lo mas completa posible (prueba a buscarla antes en google maps para asegurarte que te muestra lo que quieres, y que no sale un ‘quisiste decir…’ por ejemplo). Puedes poner las coordenadas directamente, eso ya cada uno, de eso no pongo ejemplo. Tambien hay que incluir la clave de la api de google. Si no tienes, puedes conseguir una aqui:

http://code.google.com/intl/es-ES/apis/maps/signup.html.

recuerda que hace falta una clave distinta para cada dominio.

Ahora creamos el iframe en la ubicacion que nos apatezca. A mi un buen sitio me parece  la seccion de contacto, podemos encontrar el archivo en cuestion en

/app/design/frontend/default/default/template/contacts/form.phtml

y por ejemplo, encima de donde dice

<div class="page-title">
<h2>< ? php echo Mage::helper('contacts')->__('Contact Us') ? ></h2>
</div>

incluimos nuestro código, que puede ser algo asi:

<div class="page-title">
<h2>Ven a visitarnos</h2>
</div>
<IFRAME SRC="/map.html" width=620 height=400 FRAMEBORDER=0 SCROLLING=NO align="center"></IFRAME>

es importante ajustar bien el ancho y alto del mapa dentro del html, y del iframe, para que no sea necesario el scroll, y poco mas. Con esto ya tenemos el mapita en nuestra tienda!

Facebook Twitter Linkedin Plusone Digg Delicious Reddit Email

One Comment

  1. Thanks for finally talking about >Integrar Google Maps en Magento | Carlos Robles
    frikiblog <Loved it!

Leave a Reply

Required fields are marked *.