En el capítulo anterior, hablamos de cómo cargar un mapa básico. Aquí, vamos a ver cómo seleccionar un tipo de mapa deseado.
Tipos de Mapas
Google Maps ofrece cuatro tipos de mapas. Son -
- HOJA DE RUTA - Este es el tipo por defecto. Si usted no ha elegido cualquiera de los tipos, éste será mostrado. Muestra la vista de la calle de la región seleccionada.
- SATÉLITE - Este es el tipo de mapa que muestra las imágenes de satélite de la región seleccionada.
- HYBRID - Este tipo de mapa muestra las principales calles en imágenes de satélite.
- TERRENO - Este es el tipo de mapa que muestra el terreno y la vegetación
Sintaxis
Para seleccionar uno de estos tipos de mapas, hay que mencionar la respectiva Identificación del tipo de mapa en las opciones de mapa, como se muestra a continuación -
var mapOptions = {
mapTypeId:google.maps.MapTypeId.Id of the required map type
};
Mapa vial
El siguiente ejemplo muestra cómo seleccionar un mapa de tipo HOJA DE RUTA -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se producirá la siguiente salida -
Satélite
El siguiente ejemplo muestra cómo seleccionar un mapa de tipo satélite -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se producirá la siguiente salida -
Híbrido
El siguiente ejemplo muestra cómo seleccionar un mapa de tipo híbrido -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.Hybrid
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se producirá la siguiente salida -
Terreno
El siguiente ejemplo muestra cómo seleccionar un mapa de tipo de terreno -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Se producirá la siguiente salida -
No hay comentarios.:
Publicar un comentario