Mapa de Valdemoro con Google Maps

Hemos incluido una nueva funcionalidad en la web que es un mapa con imágenes de satélites basado en la tecnología de Google Maps.

Para incluirlo empezamos con las instrucciones que aparecían en la web de Google, pero la documentación y los ejemplos son aún bastante limitados. El principal problema que te encuentras es que el montaje se hace en base a APIS de javascript y sin un conocimiento profundo de como están configuradas muchas veces te encuentras perdido. Buscando información para resolver los distintos problemas he encontrado muchas páginas en las que conseguían solucionar los problemas mediante programación a medida, pero faltaba información para resolverlos utilizando las API's standard.

Finalmente podeís ver el resultado en el siguiente enlace:

Mapa de Valdemoro

El código utilizado es el siguiente:

//En la cabecera

<script src="http://maps.google.com/maps?file=api&v=2&key=yourkey"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(Latitud,Longitud), altura,G_HYBRID_MAP);

    // Cambiar el icono del marcador - Create our "tiny" marker icon
       var icon = new GIcon();
       icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
       icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
       icon.iconSize = new GSize(12, 20);
       icon.shadowSize = new GSize(22, 20);
       icon.iconAnchor = new GPoint(6, 20);
       icon.infoWindowAnchor = new GPoint(5, 1);

    // Crear un marcador en un punto determinado Creates a marker at the given point
        function createMarker(point, number) {
          var marker = new GMarker(point,icon);
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(number);
          });
          return marker;
        }

     // Definir los marcadores
          var point = new GLatLng(Latitud,Longitud);
          var number = 'Código HTML a mostrar';
          map.addOverlay(createMarker(point, number));

      }
    }
    //]]>
    </script>

// En el cuerpo


    <div id="map" style="width: 840px; height: 500px"></div>