Latest web development tutorials

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

<!DOCTYPE html>
<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?

<!DOCTYPE html>

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:

<style type="text/css">
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:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

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:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

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

function loadScript()
{
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:

var mapProp = {
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>:

<div id="googleMap" style="width:500px;height:380px;"></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

var map=new google.maps.Map(document.getElementById("googleMap")
,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 map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
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:

google.maps.event.addDomListener(window, 'load', initialize);