1. Hacer una consulta con PHP de todas las direcciones.
2. Conectarme a Google maps (el cual tendria en mi web)
3. Poner un punto en cada direccion.
Alguien que sepa al respecto?
Les dejare 2 codigos, uno para buscar una direccion en Google Maps
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Autentia: dinos donde se encuentra tu empresa</title> <script src="AQUI VA EL API" type="text/javascript"></script> <script type="text/javascript"> var map; var geocoder; function initialize() { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(40.452557, -3.510673), 15); // insertar los controles map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); geocoder = new GClientGeocoder(); } // addAddressToMap() is called when the geocoder returns an // answer. It adds a marker to the map with an open info window // showing the nicely formatted version of the address and the country code. function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("Lo sentimos, no se ha encontrado su direcci&ocute;n"); } else { place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); map.setCenter(point, 15); marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { document.getElementById("punto").value = marker.getLatLng().toUrlValue(); marker.openInfoWindowHtml(place.address); generateKML(place.address, marker.getLatLng().lng(), marker.getLatLng().lat()); }); map.addOverlay(marker); marker.openInfoWindowHtml(place.address); document.getElementById("punto").value = marker.getLatLng().toUrlValue(); generateKML(place.address, place.Point.coordinates[0], place.Point.coordinates[1]); } } // showLocation() is called when you click on the Search button // in the form. It geocodes the address entered into the form // and adds a marker to the map at that location. function showLocation() { var address = document.forms[0].q.value; geocoder.getLocations(address, addAddressToMap); } // findLocation() is used to enter the sample addresses into the form. function findLocation(direccion, empresa ) { document.forms[0].q.value = direccion; document.getElementById("empresa").value = empresa; showLocation(); } function generateKML(description, lng, lat){ document.getElementById("kml").value = ''; var kml = '<?xml version="1.0" encoding="UTF-8"?>\n'; kml = kml + '<kml xmlns="http://earth.google.com/kml/2.2">\n'; kml = kml + '<Placemark>\n'; kml = kml + '\t<name>' + document.getElementById("empresa").value + '</name>\n'; kml = kml + '\t<description>' + description + '</description>\n'; kml = kml + '\t<Point><coordinates>' + lng + ',' + lat + ',0</coordinates></Point>\n'; kml = kml + '</Placemark>\n'; kml = kml + '</kml>\n' document.getElementById("kml").value = kml; } </script> </head> <body onload="initialize()"> <a href="javascript:void(0)" onclick="findLocation('Avenida de Castilla 2, San Fernando de Henares', 'Autentia');return false;">Ir a Autentia</a><br/> <p> <b>Escribe el nombre de tu empresa:</b> <input id="empresa" type="text" size="40"/> </p> <form action="#" onsubmit="showLocation(); return false;"> <p> <b>Escribe aquí tu dirección:</b> <input type="text" name="q" value="" class="address_input" size="40" /> <input type="submit" name="find" value="Buscar" /> </p> </form> <div id="map_canvas" style="width: 800px; height: 600px"></div> <p> <b>Coordenadas:</b> <input id="punto" type="text" size="40"/> </p> </body> </html>
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Autentia: dinos donde se encuentra tu empresa</title> <script src="aqui va el api" type="text/javascript"></script> <script type="text/javascript"> function Principal(){ var direcciones=new Array(); direcciones[0]="Av. Santa Fe 3181"; direcciones[1]="Av. Corrientes 3247"; direcciones[2]="Av. Corrientes 3889"; direcciones[3]="Av. Santa Fe 3253"; direcciones[4]="Av. Cabildo 2202"; direcciones[5]="Av. Rivadavia 5216"; direcciones[6]="Brasil 1253"; direcciones[7]="Av. Melian 4630"; direcciones[8]="Av. Rivadavia 6502"; direcciones[9]="Av. Rivadavia 11626"; direcciones[10]="Florida 296"; direcciones[11]="Av. Corrientes 756"; direcciones[12]="Valentin Gomez 2813"; direcciones[13]="Av. Santa Fe 2401"; geocoder = new google.maps.Geocoder(); for (var i = 0; i < direcciones.length; i++) { setDireccion(i); } } function setDireccion(INDEX) { var request = new Object(); //CREO UN OBJETO request.address = direcciones[INDEX] + ", Ciudad de Buenos Aires"; //sé que son direcciones en capital geocoder.geocode(request, addAddressToMap); //geocode hace la conversión a un punto, y su segundo parámetro es una función de callback } function addAddressToMap(response, status) { if(!response) return; //si no pudo //icono que voy a usar para mostrar el punto en el mapa var icon = new google.maps.MarkerImage( "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png", new google.maps.Size(20, 34), new google.maps.Point(0, 0), new google.maps.Point(10, 34) ); //creo el marcador con la posición, el mapa, y el icono marker = new google.maps.Marker({ 'position': response[0].geometry.location, 'map': map, 'icon': icon }); marker.setMap(map); //inserto el marcador en el mapa } </script> </head> <body onload="Principal()"> </body> </html>
Al parecer lo hace, pero no logro acoplarlo.
Saludos.
que lo ubican dentro de un mapa. Debo advertir que para mi caso en particular algunas direcciones de mi ciudad son mal generadas pero eso ya es culpa del aplicativo. Eso es de prueba y error.
