base de Google Maps
Crear un simple Google Maps
Ahora vamos a crear un simple Mapas de Google.
El siguiente es un gráfico que muestra el Google Maps Londres:
Ejemplos
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</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>
Trate »
Ejemplos de analítica
En el ejemplo anterior creamos un proceso para resolver el mapa de Google.
¿Por qué debería declarar la aplicación HTML5?
La mayoría de los navegadores utilizan el "modelo estándar" de HTML5 haciendo que el documento de página, lo que significa que su aplicación es compatible con todos los principales navegadores.
Además, si no hay ninguna etiqueta DOCTYPE, el navegador que utilice el modo promiscuo (peculiaridades modo) para representar el contenido de la página.
Consejo: Debe tenerse encuenta que algunos "modo promiscuo" en el CSS y no se puede utilizar el modo estándar. En una aplicación particular, todos deben heredar de elementos de bloque de los padres sobre la base de un porcentaje del tamaño. Si no se especifica el tamaño del módulo de la matriz, el valor por defecto 0 x 0 píxeles. Si desea utilizar porcentajes, puede ser declarada en la etiqueta <style>, de la siguiente manera:
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
Este módulo declaración de estilo map Mostrar (GoogleMap) debe ser la altura HTML del 100%.
Añadir Google Maps API Key
En el siguiente ejemplo, la primera etiqueta <script> debe ser incluida en la API de Google Maps:
La clave de API generado por Google colocado en parámetrosclave(clave= YOUR_API_KEY).
Se requiere queel parámetro de sensor, el parámetro se utiliza para indicar si la aplicación utiliza un sensor (similar a la de navegación GPS) para localizar la ubicación del usuario.valores de los parámetros se pueden establecer en verdadero o falso.
HTTPS
Si su aplicación es HTTP seguro: aplicación (HTTPS HTTP seguro), puede utilizar HTTPS para cargar el API de Google Maps:
carga asíncrona
Del mismo modo, también podemos cargar el API de Google Maps después de que la página se ha cargado completamente.
En el siguiente ejemplo se utiliza window.onload para implementar completamente cargado cuando se carga la página de Google Maps. CargarScript () crea cargar el API de Google Maps etiqueta <script>. También al final de la etiqueta a la devolución de llamada = inicializar los parámetros, inicializar () se ejecutará después de la API está totalmente cargado como la función de devolución de llamada:
Ejemplos
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}
window.onload = loadScript;
Trate »
Propiedades de mapa personalizado
Antes de inicializar el mapa, tenemos que crear un objeto de mapa para definir propiedades del mapa de la propiedad:
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
centro (centro)
Centro atributo especifica el centro del mapa, que por las coordenadas (latitud y longitud) para crear un punto central en el mapa.
Zoom (Serie zoom)
propiedad de zoom zoom del mapa especifica el número de etapas. Zoom: 0 de la escala completa todo el mapa de la Tierra.
MapTypeId (mapa de tipo inicial)
atributo de tipo mapTypeId especifica el mapa inicial.
mapTypeId incluye los siguientes cuatro tipos:
- google.maps.MapTypeId.HYBRID: imágenes de satélite muestran la calle principal de la capa transparente
- google.maps.MapTypeId.ROADMAP: mostrar el mapa de calle normal
- google.maps.MapTypeId.SATELLITE: Mostrar la imagen de satélite
- google.maps.MapTypeId.TERRAIN: muestra mapas con características físicas (como la topografía y la vegetación) de
Donde para mostrar Google Maps
Normalmente se utiliza en el elemento de Google Maps <div>:
Nota: El tamaño delmapa se div configurado para mostrar el tamaño del mapa, por lo que podemos ajustar el tamaño del mapa en el elemento <div>.
Crear un objeto de mapa
,mapProp);
El código anterior utiliza el parámetro (mapProp) en el elemento <div> (id es googleMap) crea un nuevo mapa.
Consejo: Si desea crear varias páginas de mapas, sólo tiene que añadir un nuevo mapa objetos pueden ser.
El ejemplo siguiente define cuatro mapas (mapas de instancia utilizando cuatro tipos de mapas diferentes):
Ejemplos
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);
Trate »
Cargando mapa
Mapa ventana para inicializar el objeto después de la carga mediante la ejecución de la función initialize (), lo que garantiza que la página se cargue por completo antes de cargar los mapas de Google: