Hola a todos
Siguiendo los ejemplos de Antonio, he construido un mapa, pero me gustar铆a c贸mo incluyo los marcadores desde la dbf y asignarles un marcador diferente seg煤n sea la actividad profesional.
El c贸digo con el que he construido el mapa es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
聽 聽
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=[REDACTED:GOOGLE_API_KEY]&libraries=places">
</script>
<script type="text/javascript">
聽 聽 var locations = [
聽 聽 ['Location 1 Name', 'Val猫ncia, Comunidad Valencia, Espa帽a', 'Location 1 URL'],
聽 聽 ['Location 2 Name', 'Benidorm, Comunidad Valenciana, Espa帽a', 'Location 2 URL'],
聽 聽 ['Location 3 Name', 'Vinar贸s, Comunidad Valenciana, Espa帽a', 'Location 3 URL']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
聽 聽 map = new google.maps.Map(
聽 聽 document.getElementById("map_canvas"), {
聽 聽 聽 聽 center: new google.maps.LatLng( 39.13354, -0.491389),
聽 聽 聽 聽 zoom: 13,
聽 聽 聽 聽 mapTypeId: google.maps.MapTypeId.ROADMAP
聽 聽 });
聽 聽 geocoder = new google.maps.Geocoder();
聽 聽 for (i = 0; i < locations.length; i++) {
聽 聽 聽 聽 geocodeAddress(locations, i);
聽 聽 }
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
聽 聽 var title = locations[i][0];
聽 聽 var address = locations[i][1];
聽 聽 var url = locations[i][2];
聽 聽 geocoder.geocode({
聽 聽 聽 聽 'address': locations[i][1]
聽 聽 },
聽 聽 function (results, status) {
聽 聽 聽 聽 if (status == google.maps.GeocoderStatus.OK) {
聽 聽 聽 聽 聽 聽 var marker = new google.maps.Marker({
聽 聽 聽 聽 聽 聽 聽 聽 icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
聽 聽 聽 聽 聽 聽 聽 聽 map: map,
聽 聽 聽 聽 聽 聽 聽 聽 position: results[0].geometry.location,
聽 聽 聽 聽 聽 聽 聽 聽 title: title,
聽 聽 聽 聽 聽 聽 聽 聽 animation: google.maps.Animation.DROP,
聽 聽 聽 聽 聽 聽 聽 聽 address: address,
聽 聽 聽 聽 聽 聽 聽 聽 url: url
聽 聽 聽 聽 聽 聽 })
聽 聽 聽 聽 聽 聽 infoWindow(marker, map, title, address, url);
聽 聽 聽 聽 聽 聽 bounds.extend(marker.getPosition());
聽 聽 聽 聽 聽 聽 map.fitBounds(bounds);
聽 聽 聽 聽 } else {
聽 聽 聽 聽 聽 聽 alert("geocode of " + address + " failed:" + status);
聽 聽 聽 聽 }
聽 聽 });
}
function infoWindow(marker, map, title, address, url) {
聽 聽 google.maps.event.addListener(marker, 'click', function () {
聽 聽 聽 聽 var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
聽 聽 聽 聽 iw = new google.maps.InfoWindow({
聽 聽 聽 聽 聽 聽 content: html,
聽 聽 聽 聽 聽 聽 maxWidth: 350
聽 聽 聽 聽 });
聽 聽 聽 聽 iw.open(map, marker);
聽 聽 });
}
function createMarker(results) {
聽 聽 var marker = new google.maps.Marker({
聽 聽 聽 聽 icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
聽 聽 聽 聽 map: map,
聽 聽 聽 聽 position: results[0].geometry.location,
聽 聽 聽 聽 title: title,
聽 聽 聽 聽 animation: google.maps.Animation.DROP,
聽 聽 聽 聽 address: address,
聽 聽 聽 聽 url: url
聽 聽 })
聽 聽 bounds.extend(marker.getPosition());
聽 聽 map.fitBounds(bounds);
聽 聽 infoWindow(marker, map, title, address, url);
聽 聽 return marker;
}
</script>
</body>聽
</html>
Gracias
