Un ejemplo básico de google maps en la web

Un ejemplo básico de google maps en la web

Actualmente la localización es cada día más importante y con la tecnología actual esta tarea se puede hacer simple y muy fácil su implementación. Hay muchos proveedores para mostrar localización y además estas herramientas se pueden usar en diferentes plataformas y dispositivos.

Nosotros en este caso vamos a ver cómo usar google maps. Lo que vamos a realizar es

•      Ver cómo podemos mostrar un mapa
•      Ver cómo posicionar un punto en el mapa
•      Y vamos a ver como cambiar esa posición dentro del mapa y ver cómo darnos cuenta cuando el punto cambia en el mapa

Para poder hacer esto posible vamos a necesitar las siguientes tecnologías

•       Html
•       Javascript
•       Jquery

En nuestro ejemplo lo primero que tenemos que hacer es agregar el llamado a jquery, esto lo vamos a poner en el head de la página web

Luego tenemos que agregar la línea que nos va permitir usar el api de los google maps

Después que tenemos estos scripts vamos a agregar el siguiente para obtener las imágenes que queremos mostrar en los puntos marcados en nuestro mapa

var customIcons = {

                    me: {

                        icon: ' ../../Images/me.png',

                        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

                    }

                };

Ahora bien estas imágenes las pueden cambiar y agregar las que ustedes deseen.

Para mostrar el mapa vamos a crear un div el cual nos va a permitir mostrar el mapa en este ejemplo le vamos a llamar mapa_canvas y lo vamos a crear con las siguientes características

Ahora en la función del document ready de jquery vamos a crear nuestro mapa con las siguientes características. $(document).ready(function () {
                                            var infoWindow = new google.maps.InfoWindow;                                            var latlng = new google.maps.LatLng(9.917153276459203, -84.08123874664307);                                            var myOptions = {zoom: 8,center: latlng,                                       mapTypeId: google.maps.MapTypeId.ROADMAP};
                                            var type = "";  
 var map = new google.maps.Map(document.getElementById("mapa_canvas"), myOptions);                                            var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({map: map,draggable: true,                                                position: latlng,    icon: icon.icon,       shadow: icon.shadow });                                                                               google.maps.event.addListener(marker, 'dragend', function (event) {                                                                                          posset = 1;                                                                                          if (map.getZoom() < 10) { map.setZoom(10); }                                                                                          map.setCenter(event.latLng);                                                                                          cambiarPuntos(event.latLng);      
                         });
                });

Donde podemos ver opciones como el zoom, que nos ayuda a visualizar el mapa del tamaño que desea, la opción de draggable que nos permite indicar si queremos que el punto señalado pueda ser cambiado o no, entre otras.

Para poder saber cuando las coordenadas del punto cambian debemos agregar un evento google.maps.event.addListener el cual se va a disparar en cada vez que este cambio ocurre.

Cuando los cambios ocurran vamos a disparar este evento y llamar un método que nos muestra una alerta de javascript con las nuevas coordinadas.

 function cambiarPuntos(point) {

        alert(point.lb + " , " + point.mb);

    }

Adjunto el ejemplo completo para que puedan utilizarlo. Espero que este pequeño ejemplo les sea de mucha utilidad. 

Pueden encontrar mas información en https://developers.google.com/maps/

Ejemplo  Completo