Existe un control en Google Maps que nos permite cambiar entre los distintos tipos de mapas de Google.
Se pueden incluir varios controles interactivos en los mapas de Google, por ejemplo para hacer zoom sobre el mapa o para alternar entre distintos tipos de mapa.
Veremos ahora como hacer un mapa poniendo un control con tres botones, pinchando los cuales el usuario puede seleccionar el tipo de vista que desea.
Esto se hace con el método addControl de la clase GMap2, pasando por parámetro una instancia del tipo de control que se desea incluir. Habría que poner esta línea en el código, después de centrar el mapa en la posición deseada.
map.addControl(new GMapTypeControl());
Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. El mapa estará centrado en Peñíscola, provincia de Castellón, donde tenía la sede el Papa Luna.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16);
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Veremos ahora como hacer un mapa poniendo un control con tres botones, pinchando los cuales el usuario puede seleccionar el tipo de vista que desea.
Esto se hace con el método addControl de la clase GMap2, pasando por parámetro una instancia del tipo de control que se desea incluir. Habría que poner esta línea en el código, después de centrar el mapa en la posición deseada.
map.addControl(new GMapTypeControl());
Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. El mapa estará centrado en Peñíscola, provincia de Castellón, donde tenía la sede el Papa Luna.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16);
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...