Hola, no se si podran ayudarme al respecto, tengo una base de datos con aproximadamente 1000 direcciones, quisiera poder ubicar a estas personas en google maps, pero hacerlo al mismo tiempo, es decir:
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> Y este otro q trataba de poner
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> Como referencia:
http://blog.alebanzas.com.ar/2012/01...iones-al-mapa/
Al parecer lo hace, pero no logro acoplarlo.
Saludos.