Introducción
El elemento fundamental en cualquier aplicación del API de Google Maps v. 3 es el propio mapa. En este documento se explica el uso del objeto
google.maps.Map fundamental y los aspectos básicos de las operaciones de mapa. (Si ya has consultado el tutorial de la versión 2, este te resultará bastante parecido. No obstante, es importante que leas este documento, ya que existen algunas diferencias).El "Hello, World" de Google Maps v. 3
La manera más fácil de iniciar el aprendizaje del API de Google Maps es observar un sencillo ejemplo. La siguiente página web muestra un mapa centrado en Sydney, Nueva Gales del Sur, Australia:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
Elementos DOM de mapa
<div id="map_canvas" style="width: 100%; height: 100%"></div>Para que el mapa se muestre en una página web, debemos reservar un lugar para él. Normalmente, lo hacemos mediante la creación de un elementodivcon nombre y la obtención de una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador.Opciones de mapa
var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};Antes de inicializar un mapa, debemos crear un objetoMap optionsque contenga las variables de inicialización correspondientes. Este objeto no se construye, sino que se crea como un objeto literal. Como queremos centrar el mapa en un punto específico, también debemos crear un valorlatlngque aloje esta ubicación y la transmita a las opciones del mapa. Para obtener más información sobre cómo especificar distintas ubicaciones, consulta la sección Latitudes y longitudes a continuación.También debemos establecer el nivel de zoom inicial y especificarmapTypeIdcomo valor degoogle.maps.MapTypeId.ROADMAP. Se admiten los siguientes tipos:
ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.SATELLITE, que muestra imágenes de satélite.HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).
A diferencia del API de Google Maps v. 2, no existe ningún tipo de mapa predeterminado. Debes establecer de forma específica un tipo de mapa inicial para poder ver los mosaicos correspondientes.
