Como complemento del Post del
mes pasado, ahora veremos el uso del Api de Google Maps V3. Para ello veremos
algunas funciones y un ejemplo de aplicación.
Para usar el Api de Google Maps V3
en una
página web, usamos el Java Script (en esta página puedes tener más
referencia sobre este lenguaje: http://www.w3schools.com/js/) y lo invocamos
con la siguiente sentencia:
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">:
Este enlace se encarga de cargar
el Api Google Maps V3 en nuestra página.
Llamar las Variables del Api: Para ello, se usa
new google.maps.VARIABLE
Donde VARIABLE puede ser una de las instrucciones que se detalla a
continuación:
LatLng:
Es la instrucción para crear un Punto con coordenadas Geográficas (*). Para más
detalle de las propiedades, sigan este enlace:
https://developers.google.com/maps/documentation/javascript/reference?hl=es#LatLng
Descripción:
var PtoLatLng
= center: new google.maps.LatLng(Latitud, Longitud)
Ejemplo:
var PtoLatLng: new google.maps.LatLng(9.1948,
-74.9908)
(*) Existe el Objeto Point (https://developers.google.com/maps/documentation/javascript/reference?hl=es#Point),
pero para nuestro ejemplo, no lo usaremos.
mapOptions: Controla las opciones que le damos al mapa.
Para más detalle de las propiedades, sigan este enlace:
Descripción:
var mapOptions =
{
zoom: variable de tipo Numero entre 1 a
21 (*),
center: variable de tipo LatLng,
mapTypeId:
es el Tipo de fondo que se usara para el mapa(**)
};
Ejemplo
var mapOptions = {
zoom:
5,
center:
new google.maps.LatLng(-9.1948,
-74.9908),
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
(*)
Según la experiencia, en algunos lugares estos valores pueden variar, pueden
excederse más de 21 y se ve un cambio en las imágenes.
(**)
Son 4 tipos de fondos:
google.maps.MapTypeId.TERRAIN: Se ve la topografía de la zona
vista.
google.maps.MapTypeId.ROADMAP: Se velas vías principales de
la zona vista.
google.maps.MapTypeId.SATELLITE: Se ve un fondo tipo Google
Earth.
google.maps.MapTypeId.HYBRID: es un fondo combinado entre
SATELLITE y ROADMAP.
Map: es usado para definir el Lienzo que servirá
de lugar del Mapa. Para más detalle de las propiedades, sigan este enlace:
Descripción:
var map = new google.maps.Map(document.getElementById('id
del element que servira de lienzo'), mapOptions);
Ejemplo:
var map = new google.maps.Map(document.getElementById('mi_mapa'), mapOptions);
Se supone que existe un elemento
con el id = “mi_mapa” en la pagina.
LatLngBounds:
se usa para definir un rectángulo con los límites de los objetos contenidos. Su
Método Extend(LatLng) extiende este
límite con el punto (LatLng) añadido. Para más detalle de las propiedades, sigan este enlace:
Descripción:
var
bounds = new google.maps.LatLngBounds();
bounds.extend(variable
de tipo LatLng);
Ejemplo:
var
bounds = new google.maps.LatLngBounds(); // creamos la variable bounds
var capital = new google.maps.LatLng(-15,-75); // creamos
el LatLng Capital
bounds.extend(capital);
// ahora bounds tendra el limite de capital
Marker: es
usado para crear una marca sobre el mapa, está compuesto de un LatLng, Map, un
texto como nombre de la marca, entre otras variables. Para más detalle de las propiedades, sigan
este enlace:
Descripción:
var marker = new google.maps.Marker({position:variable
de tipo LatLng , map: variable de tipo map, title: variable de tipo texto});
Ejemplo:
var
marker = new google.maps.Marker({position: capital , map: map, title: “mi
capital”});
event.addDomListener:
para ejecutar funciones en una determinada evento sucedido. Para más detalle de las
propiedades, sigan este enlace:
https://developers.google.com/maps/documentation/javascript/reference?hl=es#event
Descripcion:
google.maps.event.addDomListener(lugar
donde sucede el evento, evento sucedido, función a ejecutar);
Ejemplo:
google.maps.event.addDomListener(window,
'load', cargamapa);
Ejemplo de uso:
El siguiente script, dibujara las
capitales del Perú como Markers en un fondo tipo TERRAIN. La informacion de las capitales estan guardados en un array de dos dimensiones en PHP y luego se lleva al Java Script para ser usados por el Api Google Maps V3. El código lo pueden descargar desde este enlace.
Explicación del Código: La mayor parte del código esta
comentado. Solo se hará énfasis en la parte:
var
capitales_peru_array = ;
Donde paso el array de dos dimensiones creado en PHP para
que sea usado en JavaScript y dibujar los puntos
Resultado:
Al ejecutar este archivo PHP en el navegador web (para
ejecutarlo, en la barra de dirección ponemos localhost/googlemap.php):
Esperando que sea de ayuda, será hasta el otro mes.
