Aprender a agregar un mapa de Google a una página web.
Una página Web Básico
Todas las páginas web están escritas en HTML.
Para demostrar cómo añadir un mapa de Google a una página web, vamos a utilizar una sencilla página web básica:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
Inténtalo tú mismo " Establecer el tamaño del mapa
Ajuste el tamaño del mapa:
Añadir la API de Google
La funcionalidad del mapa es proporcionada por una biblioteca JavaScript situada en Google.
La biblioteca de JavaScript puede ser cargado en el <head> sección de la página HTML.
En realidad se puede soltar los <head> y </head> etiquetas.
Ejemplo
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
Inténtalo tú mismo " Crear el mapa usando JavaScript
Por último añadir el código JavaScript necesario a la página:
Ejemplo
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2), zoom:
10
}
var map = new google.maps.Map(mapCanvas,
mapOptions); Inténtalo tú mismo " ejemplo Explicación
mapCanvas es el mapa del elemento HTML.
mapOptions es las opciones del mapa.
La propiedad del centro obtiene la latitud y longitud (de Londres) llamando google.maps. LatLng() google.maps. LatLng() .
La propiedad del zoom está ajustado a 10 (tratar de experimentar con el zoom)
El objeto google.maps.Map se crea con mapCanvas y mapOptions como parámetros.
Ir a nuestro Google Maps API tutorial . para aprender más acerca de Google Maps.