API Google Maps I: Crear Key e insertar API en HTML

API Google Maps I: Crear Key e insertar API en HTML

En mi primera aportación a [forCode], vamos a hacer un pequeño tutorial de uso de la API de Google Maps en .NET. En este primer artículo, explicamos como obtener la Key necesaria para utilizar el API de Google Maps en nuestro sitio web, y cómo introducirlo en código HTML.

Para ello, lo primero que se requiere es tener una cuenta de Google para solicitar la clave que nos permita utilizar libremente el control de alto nivel.

Para obtener una Key, accedemos al API’s Console Google, y creamos un proyecto.

Google API

 

 

API Google Maps

 

Después debemos activar el servicio de Google Maps API v3 y aceptamos el contrato, Google advierte entre otras cosas, de que sólo admite un máximo de 25000 peticiones al día, y que no se puede utilizar con fines comerciales, lo más recomendable, si no estás seguro es leerlo con detenimiento.

 

Activación Google Maps API

 

Una vez aceptado vamos a la sección API Access y creamos una nueva Browser key con la dns del sitio web para el que estamos desarrollando el mapa.

Nota: Generalmente no es necesario generar una clave específica para localhost (127.0.0.1), pero si lo fuera con crear una nueva clave bien IP browser, estaría listo.

 

Aceptación Google Maps API

 

Datos Key Google Maps API

 

Por último implementamos un código similar a este, dónde TU_CLAVE_API sería la Key obtenida en la API’s Console y en TRUE_O_FALSE definimos un valor booleano para el sensor.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=TU_CODIGO_API&sensor=TRUE_O_FALSE"></script>
<script type="text/javascript">
function initialize()
{
var myOptions = {
center: new google.maps.LatLng(40.39, -3.41),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

En el siguiente post, profundizaremos y ya veremos la API en acción!