Así es como usas la API de Google Maps - screencast

Entonces, su cliente le envía un correo electrónico y le pregunta: "¿Puede colocar uno de esos mapas llamativos en mi página de contacto para que los usuarios puedan ver nuestro edificio desde la vista de un satélite?". Has usado Google Maps muchas veces, pero solo hay un problema: no tienes idea de cómo usar la API. Pues saca tu cuchara y cava!

* Haga clic en el conmutador de pantalla completa..

Paso 1: obtener una clave API única

Si tuviera que descargar el código fuente que se proporciona con este artículo, encontrará que no funciona en su sitio web. La razón es porque Google requiere que todos los usuarios obtengan una "clave API" única para cada sitio que implementa mapas de Google.

Nunca temas. Es 100% gratis y tarda unos treinta segundos en registrarse. Primero, visite la página de registro de Google e ingrese la URL de su sitio web. No te preocupes por agregar un camino específico. El URL de la raíz cubrirá todas las páginas que forman parte de ese dominio. Acepte los términos y condiciones y haga clic en "Generar API".

¡Eso es! La página a la que ha sido redirigido contiene su clave única, así como una página de muestra, para que sirva como curso intensivo. Tu llave lucirá algo como:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

También encontrarás una ruta de script que se verá así:

El tuyo será diferente del mío porque contendrá su propio valor clave específico. Copia esto y pégalo en la parte principal de tu documento.

Es posible que desee marcar el enlace a la documentación de la API. Indudablemente, lo estarás refiriendo a medida que tus habilidades progresen..

Paso 2: Configuración de su HTML

Para simplificar, crearemos un diseño simple. Agregue lo siguiente dentro del elemento del cuerpo de su documento.

En una situación real, debe mover el estilo a un archivo externo (como lo hice en el video). La API utilizará los valores de altura y anchura para determinar las dimensiones de su mapa. No te preocupes, nada será recortado.

Paso 3: Javascript

A continuación, agregue lo siguiente a su archivo Javascript. Revísalo un poco y luego continúa.

 $ (function () // cuando el documento está listo para ser manipulado. if (GBrowserIsCompatible ()) // si el navegador es compatible con var map = document.getElementById ("myMap") de Google Map; // Get div elemento var m = new GMap2 (map); // nueva instancia de la clase GMap2 y pase en nuestra ubicación div. m.setCenter (new GLatLng (36.158887, -86.782056), 13); // pass en latitud, longitud y nivel de zoom. else alert ("Su navegador no es digno."););

Para tomar este código línea por línea:

• Cuando el documento esté listo para ser manipulado, ejecute el código interno. Esta es una sintaxis de jQuery, pero jQuery no es necesaria en lo más mínimo. También puede simplemente agregar un atributo "onLoad ()" a su elemento de cuerpo, aunque esto es desordenado.
• Si el navegador desde el que el usuario está accediendo al mapa no es compatible con la API, muestre una alerta (vea la parte inferior). De lo contrario, ejecute el código dentro de.
• Cree una variable llamada "mapa" y dígale que encuentre el div que contendrá el mapa.
• A continuación, cree una variable llamada "m" y haga que sea igual a una nueva instancia de la clase "GMap2". Dentro del paréntesis, pase la variable "mapa" que acaba de crear previamente
• Finalmente, establezca un punto central para que el mapa sepa qué mostrar. Para hacer esto, creamos una nueva instancia de la clase "GLatLng" y pasamos los valores de latitud y longitud. Puedes ir aquí para agarrar los valores apropiados. En mi caso, he puesto las coordenadas a mi ciudad natal. Después de eso, opcionalmente puede ingresar un nivel de zoom, que he establecido en el estándar '13'.

Este código solo le dará un mapa básico que podría ser completamente apropiado para sus necesidades. Sin embargo, si desea implementar también las funciones de "zoom" y "modo de mapa", siga leyendo.

Paso 4: Refinando nuestro mapa

Hay literalmente docenas de características que puedes agregar a tu mapa. Repasaremos algunos de ellos. Primero, implementaremos una barra de zoom que permitirá a los usuarios acercar o alejar incrementalmente.

 m.addControl (nuevo GLargeMapControl ())

Aquí, estamos tomando nuestro mapa y estamos agregando un nuevo control llamado "GLargeMapControl".

A continuación, agreguemos una función que permita a los usuarios elegir qué modo de mapa desean: Normal, Vista de satélite o híbrido.

 var c = new GMapTypeControl (); // cambiar los modos de mapa m.addControl (c);

• Cree una variable llamada "c" y haga que sea igual a una nueva instancia de la clase "GMapTypeControl".
• Agrega un nuevo control y pasa "c".

Si actualiza su navegador, verá que el usuario ahora tiene la opción de elegir su modo de visualización. Pero, ¿qué pasa si desea establecer el modo predeterminado? En tales casos, usaría "setMapType".

 m.setMapType (G_SATELLITE_MAP);

Al definir el modo por defecto, tienes tres opciones.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Estás terminado!

Eso no fue tan difícil, ¿verdad? Hay algunos nombres de clase específicos que deberá memorizar, o anotar para futuras referencias. Pero aparte de eso, es sorprendentemente sencillo implementar un mapa tan avanzado en sus sitios web.

Para los diseñadores de plantillas, ¿por qué no implementar esto en uno de los temas que vende en ThemeForest??

Hace unos días, publicamos un tutorial que muestra cómo combinar muchas API, incluido Google Maps. Pero muchos de ustedes no sabían lo suficiente para empezar. Con suerte, esto ayudará. Después de envolver su cabeza alrededor de esta API, ¿por qué no ahorrarse algunos dolores de cabeza y solicitar la ayuda de una clase de PHP llamada Phoogle? Creo que es mejor aprender de la manera correcta primero, pero ahora que tienes ... ¡recorta algunos rincones! Te veo la proxima semana.

Recurso adicional

• 

  Cómo crear un Mashup combinando 3 API diferentes

  Este tutorial le mostrará cómo crear un mashup de tres API diferentes, incluida la integración con Google Maps.

  Visita el artículo

• Suscríbase a la fuente RSS y a la fuente de video para obtener más información y artículos de desarrollo web diarios..