Google Maps Conceptos básicos
Crea un mapa simple de Google
Ahora creemos un mapa simple de Google.
Aquí hay un mapa de Google que muestra Londres, Reino Unido:
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor 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"> </div> </body> </html>Renderizaciones de ejemplo (se pueden copiar y ejecutar directamente, por supuesto, debe poder acceder a Google)
Análisis de ejemplo
Utilizamos el ejemplo anterior para analizar el proceso de creación de Google Maps.
¿Por qué una aplicación declara HTML5?
<! Doctype html>
La mayoría de los navegadores utilizan páginas de representación de documentos HTML5 "Modo estándar", lo que significa que su aplicación es compatible con los principales navegadores.
Además, si no hay una etiqueta DOCTYPE, el navegador usa el modo Quirks para representar el contenido de la página.
Consejo: debe tenerse en cuenta que un CSS de "modo promiscuo" no se puede usar con el modo estándar. En aplicaciones específicas, todos los tamaños basados en porcentaje deben ser heredados del elemento de bloque principal. Si no se especifica un tamaño en el módulo principal, el valor predeterminado es 0 x 0 píxeles. Si desea usar porcentajes, puede declararlos en la etiqueta <Syle> de la siguiente manera:
<style type = "text/css"> html {altura: 100%} cuerpo {altura: 100%; margen: 0; relleno: 0} #googlemap {altura: 100%} </style>Esta declaración de estilo indica que el módulo de mapa (GoogleMap) debe tener una altura HTML del 100%.
Agregue la tecla API de Google Maps
La API de Google Maps debe incluirse en la primera etiqueta <Script> en el siguiente ejemplo:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Coloque la tecla API generada por Google en el parámetro clave (Key = Your_api_Key).
Se requiere el parámetro del sensor, lo que indica si la aplicación usa un sensor (similar a la navegación GPS) para ubicar la ubicación del usuario. El valor del parámetro se puede establecer en True o False.
Https
Si su aplicación es una aplicación segura HTTP (HTTPS: HTTP Secure), puede usar HTTPS para cargar la API de Google Maps:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Carga asíncrona
Del mismo modo, podemos cargar la API de Google Maps después de que la página esté completamente cargada.
El siguiente ejemplo usa Window.onload para lograr una carga completa de Google Maps. La función LoadScript () crea la etiqueta API <Script> de Google Maps de carga. Además, el parámetro de devolución de llamada = Inicialize se agrega al final de la etiqueta. La inicialize () como la función de devolución de llamada se ejecutará después de cargar la API:
Ejemplo
<! DocType html> <html> <fead> <script> function inicialize () {var mapprop = {Center: new Google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeid: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);} function loadScript () {var script = document.createElement ("script"); script.type = "text/javaScript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendChild (script);} window.onload = loadscript; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Definir propiedades del mapa
Antes de inicializar el mapa, necesitamos crear un objeto de propiedad del mapa para definir algunas propiedades del mapa:
var mapprop = {Center: nuevo Google.maps.latlng (51.508742, -0.120850), Zoom: 7, maptypeid: google.maps.maptypeid.roadmap};Centro (punto central)
La propiedad central especifica el centro del mapa, que crea un punto central en el mapa a través de coordenadas (latitud, longitud).
Zoom (serie Zoom)
La propiedad Zoom especifica el rango de zoom del mapa. Zoom: 0 muestra el zoom completo de todo el mapa de la Tierra.
Maptypeid (el tipo inicial del mapa)
La propiedad MAPTypeID especifica el tipo inicial del mapa.
MAPTYPEID incluye los siguientes cuatro tipos:
Google.maps.maptypeid.hrid: la capa transparente de la calle principal que muestra la imagen satelital
Google.maps.maptypeid.roadmap: Muestra mapa de calles normal
Google.maps.maptypeid.satellite: mostrar imagen satelital
Google.maps.maptypeid.terrain: Muestra mapas con características naturales como terreno y vegetación
Dónde mostrar Google Maps
Por lo general, Google Maps se usa en <div> elementos:
<div id = "googlemap"> </div>
NOTA: El mapa mostrará el tamaño del mapa con el tamaño establecido en el DIV, por lo que podemos establecer el tamaño del mapa en el elemento <div>.
Crear un objeto de mapa
var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop);
El código anterior usa el parámetro (Mapprop) para crear un nuevo mapa en el elemento <div> (ID es GoogleMap).
Consejo: si desea crear múltiples mapas en la página, solo necesita agregar un nuevo objeto de mapa.
El siguiente ejemplo define cuatro instancias de mapas (cuatro mapas usan diferentes tipos de mapas):
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiM&sensor=false"> </script> <script> function inicialize () {var mapprop = {center: neweSensor Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.roadmap}; var mapprop2 = {Center: nuevo Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.satellite}; var mapprop3 = {Center: nuevo Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.hybrid}; var mapprop4 = {Center: nuevo Google.maps.latlng (51.508742, -0.120850), Zoom: 9, maptypeid: google.maps.maptypeid.terrain}; var map = new Google.maps.map (document.getElementById ("googlemap"), mapprop); var map2 = new Google.maps.map (document.getElementById ("googlemap2"), mapprop2); var map3 = nuevo Google.maps.map (document.getElementById ("googlemap3"), mapprop3); var map4 = new Google.maps.map (document.getElementById ("googlEmap4"), mapprop4);} google.maps.event.adddomListener (Window, 'load', inicialize); </script> id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>Cargando el mapa
Después de cargar la ventana, el objeto MAP se inicializa ejecutando la función Initialize (), que asegura que Google Maps se cargue después de cargar la página:
google.maps.event.adddomListener (ventana, 'cargar', inicializar);
Lo anterior es una compilación de la información básica de Google Maps. Continuaremos agregándolo más tarde. ¡Gracias por su apoyo para este sitio!