Google Maps

Estos días estuve un rato largo lideando con Google Maps para aprender de él y ver sus posibilidades.

El ejemplo que hice es simular un mapa de los Estados Unidos donde se pueden ver diversas propiedades.

Antes que nada hay que obtener un API Key mediante una cuenta de google y de esta forma poder usarlo.

Otra cosa de las cosas usadas fue JQuery. Ya teniendo estás dos cosas se puede echar cógido.

Se puede usar Google Maps de dos formas: una llamada totalmente secuencial y otra asíncrona. El ejemplo usa está última:

En el Javascript:

function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=APIKEYo&sensor=false&callback=initialize";
    document.body.appendChild(script);
}
function initialize()
{
    var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(38.68551, -99.22852),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        minZoom: 4,
        maxZoom: 16
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready(function () {
    loadScript();
});

En el HTML:

<div id="map_canvas"></div>

De acá uno puede empezar a complicar más la cosa. Lo siguiente sería agregar una imagen donde se hizo click en el map, que está al hacerle click salga una ventana de información y ademas debajo del mapa salga un div con un link para eliminarla.

Dentro de la función initialize se coloca lo siguiente:

    image = new google.maps.MarkerImage('path/image.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 32));
google.maps.event.addListener(map, 'click', function (event) {
    addMarker(event.latLng);
});

La función addMarker es la siguiente:

function addMarker(location, name)
{
    if (name == undefined) name = "default";
    if (markers[name] == undefined) markers[name] = [];
    var marker_number = markers[name].length;
    var contentString = '<div id="marker_info"><h2>Excelente localidad</h2></div>';
    var infowindow = new google.maps.InfoWindow({
       content: contentString,
       maxWidth: 150
    });
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: image,
        title: location.name
     });
    google.maps.event.addListener(marker, 'mouseover', function () {
        infowindow.open(map, marker);
    });
    google.maps.event.addListenerOnce(marker, 'click', function () {
        $('#marks').append('<a href="#" marker="' + marker_number + '">Eliminar- ' + marker_number + '</a>');
        $('[marker=' + marker_number + ']').click(function () {
             removeMarker("default", marker_number);
            $(this).hide();
        });
    });
    markers[name].push(marker);
}
function removeMarker(name, number)
{
    markers[name][number].setMap(null);
    markers[name][number] = null;
    swap(markers[name], number, markers[name].length - 1);
    markers[name].length -= 1;
}
function swap(array, a, b)
{
    var aux = array[a];
    array[a] = array[b];
    array[b] = aux;
}

Markers va a ser un diccionario que mapea a arreglos de marcadores.  Debajo del div donde está el mapa de google se coloca el siguiente:

<div id="marks">Haz click para eliminar </div>

Con lo siguiente se va a poder agregar marcadores en el mapa que muestran información y poder eliminarlos.

Vamos a complicar esto un poco más. Creemos una función para agregar polígonos y otra que simula búsquedas. Para ello agregamos las siguientes funciones:

En el Javascript:

function searchAddress(address, remove)
{
    var houses = searchResults[address];
    if (houses == undefined) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                alert(results[0].geometry.location.latitude + ', ' + results[0].geometry.location.longitude);
            }
            else
                alert("Geocode was not successful for the following reason: " + status);
        });
    }
    else if (houses.length == 0) return;
    else
    {
        var maxX = -360.0,
        maxY = -360.0,
        minX = 360.0,
        minY = 360.0;
        var coordinates = []
        if (remove)
        {
            for (name in searchResults)
            {
                removeMarkers(name);
                removePolygon(name);
            }
        }
        for (house in houses)
        {
            if (houses[house].longitude < minX) minX = houses[house].longitude;
            if (houses[house].longitude > maxX) maxX = houses[house].longitude;
            if (houses[house].latitude < minY) minY = houses[house].latitude;
            if (houses[house].latitude > maxY) maxY = houses[house].latitude;
            addHouseMarker(address, houses[house]);
            coordinates.push(new google.maps.LatLng(houses[house].latitude, houses[house].longitude));
         }
         addHousesPolygon(address, coordinates);
         var southWest = new google.maps.LatLng(minY, minX),
         northEast = new google.maps.LatLng(maxY, maxX);
         var bounds = new google.maps.LatLngBounds(southWest, northEast);
         map.fitBounds(bounds);
         var center_location = new google.maps.LatLng((minY + maxY) / 2, (minX + maxX) / 2);
         map.setCenter(center_location);
     }
}
function searchAllAddress()
{
    var maxX = -360.0,
    maxY = -360.0,
    minX = 360.0,
    minY = 360.0;
    for (address in searchResults)
    {
        var houses = searchResults[address];
        var coordinates = []
        for (house in houses)
        {
            if (houses[house].longitude < minX) minX = houses[house].longitude;
            if (houses[house].longitude > maxX) maxX = houses[house].longitude;
            if (houses[house].latitude < minY) minY = houses[house].latitude;
            if (houses[house].latitude > maxY) maxY = houses[house].latitude;
            addHouseMarker(address, houses[house]);
            coordinates.push(new google.maps.LatLng(houses[house].latitude, houses[house].longitude));
        }
        addHousesPolygon(address, coordinates);
    }
    var southWest = new google.maps.LatLng(minY, minX),
    northEast = new google.maps.LatLng(maxY, maxX);
    var bounds = new google.maps.LatLngBounds(southWest, northEast);
    map.fitBounds(bounds);
    var center_location = new google.maps.LatLng((minY + maxY) / 2, (minX + maxX) / 2);
    map.setCenter(center_location);
}
function removeMarker(name, number)
{
    markers[name][number].setMap(null);
    markers[name][number] = null;
    swap(markers[name], number, markers[name].length - 1);
    markers[name].length -= 1;
}
function removePolygon(name)
{
    if (polygons[name] == undefined) return;
    polygons[name].setMap(null);
    polygons[name] = null;
}

A la sección cuando el documento está listo:

$('#search_address_button').click(function () {
    var address = $('#search_address_text').val();
    searchAddress(address);
});
$('#search_address_text').click(function (event) {
    var keyDown = (event.keyCode ? event.keyCode : event.which);
    if (keyDown == 13)
        searchAddress();
});
$('.state_address').click(function () {
    var address = $(this).attr('address');
    if (address == "all")
        searchAllAddress();
    else
        searchAddress(address, true);
});

Y en el HTML:

<div id="address_selector">
    <div id="state_selector">
        <a class="state_address" address="california" href="#">California</a>
        <a class="state_address" address="washington" href="#">Washington DC</a>
        <a class="state_address" address="florida" href="#">Florida</a>
        <a class="state_address" address="ny" href="#">New York</a>
        <a class="state_address" address="utah" href="#">Utah</a>
        <a class="state_address" address="la" href="#">Los Angeles</a>
        <a class="state_address" address="default" href="#">Mines</a>
        <a class="state_address" address="all" href="#">All</a>
    </div>
    <div id="search_address">
        <input type="text" name="search_address_text" id="search_address_text"/> <input id="search_address_button" type="button" value="Search"/>
    </div>
</div>

searchResults es un arreglo que van a ver en los fuentes que publique con datos que yo mismo genere para probar.

Acá se me es algo complicado explicar el código, no encuentro como poner el código mejor y lo otro que sucede es que es mucho escribir y no tengo mucho tiempo.

Les colocó los dos archivos para que lo vean con más detenimiento y lo prueben si desean:

Javascript:

http://pastebin.com/mRu5H2kG

HTML:

http://pastebin.com/B3Z4GQNB

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s