Crear un mapa básico Google
En este ejemplo se crea un mapa de Google centrada en Londres, Inglaterra:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Inténtalo tú mismo " El resto de esta página se describe el ejemplo anterior, paso a paso.
1. Cargar la API de Google
La API de Google Maps es una biblioteca JavaScript. Puede ser agregado a una página web con un <script> etiqueta:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Establecer Propiedades del mapa
Crear una función para inicializar el mapa:
function initialize() {
}En la función de inicialización, crear un objeto (mapProp) para definir las propiedades para el mapa:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};La propiedad especifica dónde centro para centrar el mapa. Crear un objeto LatLng para centrar el mapa en un punto específico. Pasar las coordenadas en el orden: latitud, longitud.
La propiedad de ampliación hace referencia al nivel de zoom del mapa. Zoom: 0 muestra un mapa de la Tierra totalmente ampliada a cabo. niveles elevados de zoom acercar a una resolución más alta.
La propiedad mapTypeId especifica el tipo de mapa para mostrar. Los siguientes tipos de mapas son compatibles:
- HOJA DE RUTA (normal, default 2D map)
- SATÉLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRENO (map with mountains, rivers, etc.)
3. Crear un mapa de contenedores
Crear un <div> elemento para sostener el mapa. Usar CSS para el tamaño del elemento:
<div id="googleMap" style="width:500px;height:380px;"></div>El mapa será siempre "inherit" su tamaño de su elemento contenedor.
4. Crear un objeto de mapa
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);El código anterior crea un nuevo mapa en el interior del <div> elemento con id = "googleMap", usando los parámetros que se pasan (mapProp) .
5. Añadir un detector de eventos para cargar el mapa
Añadir un oyente DOM que ejecutará la initialize() la función de la carga de la ventana (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
Cargando forma asíncrona
También es posible cargar la API de Google Maps en la demanda.
El ejemplo siguiente utiliza window.onload para cargar el API de Google Maps después de que la página se ha cargado completamente.
El loadScript() función crea el API de Google Maps <script> etiqueta. Además, la devolución de llamada = parámetro inicializar se añade al final de la URL para ejecutar el initialize() la función después de la API está completamente cargado:
Ejemplo
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Inténtalo tú mismo " varios mapas
El ejemplo siguiente define cuatro mapas en una página Web (cuatro mapas con diferentes tipos de mapa):
Ejemplo
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Inténtalo tú mismo " Google API Key
Google permite a su sitio web para llamar a cualquier API Google, muchos miles de veces por día.
Si tiene previsto para el tráfico pesado, usted debe obtener una clave de API gratuito de Google.
Ir a https://console.developers.google.com para obtener una clave gratuita.
Google Maps espera encontrar la clave de API en el parámetro clave a la hora de cargar una API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>