Google Maps - Crea Mapas Perzonalizados Para la Web

Google Maps nos ofrece una API de desarrollo para diferentes plataformas como (Android, iOS, web y Servicios web).

En este tutorial vamos a implementar un proyecto web usando Google Maps JavaScript API versión 3.

Anteriormente escribí un post de como crear mapas personalizados con Google Maps API versión antigua. Pero con unos pequeños cambios en el código funciona correctamente en la nueva versión.

En actualidad para crear mapas con Google Maps API nos pide ciertos requisitos que solventaremos a continuación.

Para este post usaremos una clave estándar que permite 25.000 cargas de mapas por 24 horas de forma gratuita, para mayor información visita limites de uso para Google Maps JavaScript API.

Crear un Proyecto

Para crear un proyecto ingresa al panel de proyectos. Si no estas logueado con tu cuenta Gmail, es momento de realizarlo.

Crear un proyecto

Una vez accedido haz clic en el botón CREAR PROYECTO.

Nombre del proyecto

Coloca un nombre descriptivo para tu proyecto, luego haz clic en el botón CREAR.

Seleccionar API

Selecciona la opción Google Maps JavaScript API.

Habilitar la API JavaScript

Habilita la API haciendo clic en el botón HABILITAR.

Obtener una clave de API

Para utilizar esta API, necesitas una clave de API. Las claves de API identifican los proyectos para comprobar las cuotas y el acceso.

Panel de Credenciales

Dirígete al panel de credenciales, haciendo clic en la opción Credenciales.

Seleccionar Clave de API

Despliega el botón donde dice Crear credenciales y selecciona la opción Clave de API.

Clave de API Creada

Esta ventana muestra la clave de API creada, para continuar haz clic en el botón RESTRINGIR CLAVE.

Restringir Clave

Una de las buenas practicas para mejorar la seguridad es restringir nuestra clave de API, para este post vamos a restringir en la opción URLs de referencia HTTP (sitios web), colocamos el nombre del dominio donde se alojara tu proyecto y para finalizar haz clic en el botón Guardar.

Para evitar el robo de cuotas, asegure su clave de API siguiendo estas prácticas recomendadas.

Lista Claves

Aquí se muestra la lista de las credenciales creadas para este proyecto, en este caso se muestra la credencial creada previamente con su respectiva clave de API la cual se usara en el proyecto.

Crear un proyecto

Nota: coloca tu clave generada anteriormente en el link del script Google Maps API que se encuentra antes de </body>.

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">
  <title>Mapa - Google Maps</title>
  <style>
  body, html{
     margin: 0;
     padding: 0;
  }
  .container{
     margin: 0 auto;
     width: 80%;
     max-width: 1100px;
   }
    #map{
      height: 45vw;
    }
  </style>
</head>  
<body>  
<section class="container">  
  <div id="map"></div>
</section>  
<script type="text/javascript">  
var map;  
var mi_Latlng;  
function initMap(){  
  mi_Latlng = new google.maps.LatLng(-12.046374,-77.0427934);
  map = new google.maps.Map(document.getElementById('map'), {
    center: mi_Latlng,
    zoom: 16,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  });
  var myCity = new google.maps.Circle({
    center: mi_Latlng,
    radius:100,
    strokeColor:"#0080FF",
    strokeOpacity:0.8,
    strokeWeight:2,
    fillColor:"#0080FF",
    fillOpacity:0.4
  });
  myCity.setMap(map);
  var marker=new google.maps.Marker({
    position:mi_Latlng,
  });
  marker.setMap(map);
  var infowindow = new google.maps.InfoWindow({
    content:"Ubicación!"
  });
  infowindow.open(map,marker);
}
</script>  
<!--No olvides colocar tu clave de API-->  
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=aqui-escribe-tu-clave&signed_in=true&callback=initMap">  
    </script>
</body>  
</html>  

Si deseas averiguar tus coordenadas te recomiendo acceder a coordenadas-gps.com

Ver la documentación completa sobre Google Maps API JavaScript.

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión