Geocoding - Google Maps API 3 - Blog

Noticias

Blog

Geocoding - Google Maps API 3

blog - 26-Julio-2011 - 19:04:18

Esta es una funcion que nos puede ser muy util, cuando queramos crear mapas de google de forma dinámica a partir de la dirección de un cliente.
Recientemente esto lo hemos usado en un proyecto en el cual se crean los mapas a partir de las direcciones que tenemos en la base de datos.
De esta manera actualizar el mapa, bastará con actualizar los datos de la dirección del cliente.

Os dejo el código que hemos empleado y una imagen del resultado.
En cuanto lo tengamos publico os dejaremos un enlace para que los veais funcionando.

// Obtenemos la dirección y la asignamos a una variable
var direccion = $('#direccion').val();
// Creamos el Objeto Geocoder
var geocoder = new google.maps.Geocoder();
// Hacemos la petición indicando la dirección e invocamos la función
// geocodeResult enviando todo el resultado obtenido
geocoder.geocode({ 'address': direccion}, geocodeResult);

function geocodeResult(results, status) {

// Verificamos el estatus

            if (status == 'OK') {
                // Si hay resultados encontrados, centramos y repintamos el mapa
                // esto para eliminar cualquier pin antes puesto
                var mapOptions = {
                    center: results[0].geometry.location,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map($("#mapaEmpresa").get(0), mapOptions);
                // fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
                map.fitBounds(results[0].geometry.viewport);
                // Dibujamos un marcador con la ubicación del primer resultado obtenido
                var markerOptions = { position: results[0].geometry.location }
                var marker = new google.maps.Marker(markerOptions);
                marker.setMap(map);

                var contentString = ''+ $("#empresa").val() +''+ 'Dirección: '+ $("#direccion").val()+''+
                $("#cp").val()+ ' '+ $("#provincia").val()+'+ 'Tfno.: '+ $("#telefono").val()+'';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                infowindow.open(map,marker);
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                  });

            } else {
                // Indicamos que se ha producido un error a la hora de generar el mapa
            }
}

Además de generar el mapa, creamos un marker con la posición y la información de la dirección del cliente.
Podeis ver en el código que estamos usando jquery, por lo tanto necesitais cargar el core de jquery. Lo podeis descargar de aquí.

Indicaros que también tendreis que tener creado un elemento html con id "mapaEmpresa" que será donde cargaremos el mapa con la altura y el ancho que le indiquemos.