TUTORIAL API GOOGLE MAPS: CONFIGURACIÓN INICIAL DE MAPAS

En este primer tutorial analizaremos a fondo la configuración de los mapas de Google Maps haciendo uso de las APIs que Google tiene publicada para esto.

Antes de comenzar a trabajar lo primero que debéis hacer es obtener la llave de Google API la cual te permitirá acceder a esta API. Para obtener la llave da click aquí.

INICIALIZACIÓN DE LOS MAPAS

Lo primero que hay que hacer para inicializar el trabajo con Google Maps es agregar la librería de la API.

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

Nótese que hay dos campos:

KEY: Es la llave asociada a la cuenta de Google Maps.

SENSOR: Posibles valor “true” o “false” en caso de ser true quiere decir que se va a utilizar GPS para geolocalización.

 SCRIPT DE GOOGLE MAPS

El elemento que le da toda la funcionalidad es el script en Java Script que permitirá controlar el comportamiento del mapa, un ejemplo básico sería algo como esto:

API Google Maps

API Google Maps. Mapa 1

<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>

Nótese como hay varios campos que controlan el mapa que se va a ver y el zoom:

–          Center: Se pasan las coordenadas del sitio que necesitamos ver, importante recalcar que deben ser coordenadas de google maps.

–          ZOOM: es el zoom de lo que se desea ver, obviamente mientras más alto el número se acerca más.

–          mapTypeId: Es el tipo de mapa que se desea ver, es decir las diferentes capas que se desea que tenga

      • MapTypeId.ROADMAP muestra la vista de mapa de carretera predeterminada.
      • MapTypeId.SATELLITE muestra imágenes de satélite de Google Earth.
      • MapTypeId.HYBRID muestra una mezcla de vistas normales y de satélite.
      • MapTypeId.TERRAIN muestra un mapa físico basado en información del relieve.

–          En la última línea lo que podemos ver es que se carga el mapa en un elemento del body, como se hace normalmente en JQuery, por lo que el body quedaría:

 <body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Y es aquí donde además puedes modificar el tamaño de los mapas.

EJEMPLOS

EJEMPLO 1: Mapa de Cuba

 

Inicialmente comenzaremos con el mapa general de cuba.

 

<!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=XXXXXXXXXXXXXXXXXXXXXXXX&sensor=false">

    </script>

    <script type="text/javascript">

      function initialize() {

        var mapOptions = {

          center: new google.maps.LatLng(21.453069, -79.584961),

          zoom: 7,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),

            mapOptions);

      }

    </script>

  </head>

  <body onload="initialize()">

    <div id="map_canvas" style="width:100%; height:100%"></div>

  </body>

</html>

Generaría un mapa como este:

Mapa de Cuba con la API de Google Maps

Mapa de Cuba con la API de Google Maps

Para continuar con el aprendizaje de esta API podéis ver el segundo tutorial donde se muestra como hacer markers.

Acerca de ronald

Deja un Comentario

Tu dirección de email no será publicada. Required fields are marked *

*

Free WordPress Themes - Download High-quality Templates