Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
GOOGLE MAPS API V3: INTRODUCCION
#1
Google Maps API v3 es la nueva API de los mapas de Google, los cuales los podemos utilizar para nuestros proyectos que tengan que ver con ubicaciones, etc.
En esta Introducción Vamos a hablar principalmente lo básico para insertar un mapa en nuestra aplicación web.
Obtener tener una Browser API KEY: http://evilnapsis.com/2015/08/23/google-developers-obtener-la-api-key/
Para hacer pruebas te presto mi API KEY con Acceso a la Google Maps API v3: AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0
CODIGO COMPLETO
A continuación el código completo, ya con esto puedes ver el Mapa en tu pagina web.

Código:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API v3: Introduccion</title>
</head>
<body>
<h1>Google Maps API v3: Introduccion</h1>
<div id="map" style="width:100%;height:600px;"></div>
<script type="text/javascript">

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.63, lng: -102.55},
zoom: 4
});
}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0&callback=initMap">
</script>
</body>
</html>

El resultado es el Siguiente:

[img=644x0]http://evilnapsis.com/wp-content/uploads/2015/08/mapa-1-644x349.png[/img]

 

EXPLICACION

Debemos llamar a la libreria Javascript que se encarga de renderizar el mapa, ademas le debemos asignar 2 parámetros,uno es la API-KEY, la cual ya la puse arriba para pruebas y el otro parámetro es una función Javascript que se va a llamar para ejecutar el mapa, en este ejemplo usaremos una función llamada initMap:

<script async defer
src=”https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=CALLBACK”>
</script>


Para mostrar el mapa necesitamos un elemento div al cual le debemos asignar medidas width y height, en este ejemplo usamos:

<div id=”map” style=”width:100%;height:600px;”></div>
Ahora ya que tenemos el div y el Javascript de Google Maps nos falta el callback, el cual es el siguiente:

Código:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.63, lng: -102.55},
zoom: 4
});
}

Basicamente definimos un objeto tipo google.maps.Map, el cual lleva como parametros, el objeto del elemento div que ya creamos, ademas el parámetro center que tiene las coordenadas latitud y longitud que serán el centro de nuestro mapa y por ultimo el zoom o acercamiento que nos mostrar el mapa en referencia al centro marcado.

CONCLUSIÓN
Esto es todo por esta entrega, como pueden ver no es muy difícil insertar un mapa, en la siguiente entrega veremos como agregar marcadores a los mapas.
#2
Hacía mucho que buscaba una información como esta. Muchas gracias, lo probaré a ver que tal va.
WWW
#3
que chulo, esta muy bien cuando quiere hacer diferencias geograficas.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Aporte] Google Made With Code carlsmartg 3 380 29-05-2017, 08:11 PM
Último mensaje: brettavz
  INTRODUCCION Y CRUD CON MONGODB khristia 5 680 30-09-2016, 07:08 PM
Último mensaje: Boreas
  CONECTAR Y LISTAR ARCHIVOS DE GOOGLE DRIVE CON PHP khristia 1 610 16-08-2016, 08:29 PM
Último mensaje: efbsfcd
  GOOGLE CHARTS: INTRODUCCION A LA VISUALIZACION DE DATOS, GRAFICAS, MAPAS Y MAS khristia 2 542 16-08-2016, 08:27 PM
Último mensaje: efbsfcd
  Curso básico de introducción a la programación Posits 1 483 04-08-2016, 02:48 AM
Último mensaje: antony_tj
  [Duda] Ayuda para añadir nueva recaptcha de google fercol 9 790 13-12-2015, 02:31 PM
Último mensaje: fercol
  ¿ por que google chrome es incomtaible con java a partir del 2015? dormio 0 290 30-11-2015, 01:29 PM
Último mensaje: dormio
  Cambio Algoritmo Google asociado a Móviles Celulares canpios 5 507 02-06-2015, 08:01 AM
Último mensaje: efbsfcd
  Cómo saber mi ID de Facebook, Twitter, y Google+ imgur 0 488 04-12-2014, 05:39 AM
Último mensaje: imgur
  Introducción a PHP xLukii 0 464 19-06-2014, 12:53 AM
Último mensaje: xLukii



Usuarios navegando en este tema: 1 invitado(s)