Insertar mapa de Google Maps sin iframes para cumplir el doctype strict

Insertar un mapa de Google Maps en una página usando un iframe es una forma sencilla, aunque obsoleta, de tener un mapa deprisa en la página web. Pero si uno ha de cumplir los estándares marcados por el doctype strict, hay que descartar la idea y usar javascript. Aquí tenemos un ejemplo que usa un único punto y que al hacerle click muestra la información pasada como un string.

<!– GOOGLEMAPS –>
<script src=”http://maps.google.com/maps?f=q&amp;file=api&amp;key=<%=GMAPS_KEY%>&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Miramon+pasealekua+124+20014+Donostia-San+Sebasti%C3%A1n&amp;sll=40.396764,-3.713379&amp;sspn=11.774806,28.564453&amp;ie=UTF8&amp;z=14&amp;iwloc=A&amp;ll=43.301134,-1.967497&amp;output=embed&#8221; type=”text/javascript”></script>

<script type=’text/javascript’>
//<![CDATA[

var gmarkers = [];

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(‘mapa’));
map.setCenter(new GLatLng(43.301134, -1.967497), 14);
var mm = new GMarkerManager(map);

// add the points
var point = new GLatLng(43.293134, -1.9720497);
var marker = new GMarker(point,{title: ‘Texto que saldrá al dejar el ratón sobre el marcador.’});
GEvent.addListener(marker, ‘click’, function() { marker.openInfoWindowHtml(“Texto que saldrá al hacer click en el marcador.”);} );
gmarkers[0] = marker;
mm.addMarkers(gmarkers, 0, 17);
mm.refresh();

}
}

//]]>
</script>
<div id=”mapa”>

</div>
<small><a id=”enlaceGoogleMaps” href=”http://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=Miramon+pasealekua+124+20014+Donostia-San+Sebasti%C3%A1n&amp;sll=40.396764,-3.713379&amp;sspn=11.774806,28.564453&amp;ie=UTF8&amp;z=14&amp;iwloc=A&amp;ll=43.301134,-1.967497&#8243; style=”color:#0000FF;text-align:left”>Ver mapa más grande</a></small>

El código se puede optimizar mucho, pero de momento quería documentar la solución deprisa.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: