I’m so close on this one right now, but can’t quite get the result I’m looking for. This is an attempt to pull a series of geolocations – along with a title and text. These are then assigned to markers which are populated on a google map. My ultimate goal is to get the distance and duration of travel between each of the markers and the ‘map-center’ marker (hub if you will) and populate it in the infoWindow when an individual marker is clicked.
So far I’ve got every aspect of this working EXCEPT getting the distance/duration to populate correctly in the infoWindow. I can successfully populate a div outside of the ‘map-canvas’ with innerHTML.
If I either try to print an assigned var or change the content of a div within the infoWindow, the function only works on the first click event. After that the infoWindow shows up blank. Here is the working script:
<head>
<meta charset="utf-8" />
<title>Towns Hub</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style>
.wrapper {position:relative;width:500px;height:300px;margin:30px auto;}
#map {width:500px;height:300px;}
.container{position:absolute;bottom:0;left:0;width:100%;z-index:999;}
.trav-det{border:1px solid #000;float:left;padding:7px;font-size:1.5em;background: rgba(255,255,255, .85);}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class='trav-det' id='distance_road'></div>
<div class='trav-det' id='duration'></div>
</div>
<div id="map"></div>
</div>
<script>
var map;
var arrMarkers = [];
var infowindow = new google.maps.InfoWindow();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function mapInit(){
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport:true
});
var latlng = new google.maps.LatLng(45.18929617,-109.24727440);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(45.18929617,-109.24727440),
map: map,
title: 'Red Lodge, MT',
icon: 'http://mywebsite.com/images/orange-marker.png'
});
$.getJSON("hub.txt", {}, function(data){
$.each(data.places, function(i, item){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title
});
arrMarkers[i] = marker;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<p><strong>" + item.title + "</strong><br>"+ item.description +"</p>");
calcRoute(this.getPosition());
infowindow.open(map, this);
});
function calcRoute(drive_end) {
var start = new google.maps.LatLng(45.18929617,-109.24727440);
var end = drive_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = response.routes[0].legs[0].distance.text;
duration = response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
document.getElementById("duration").innerHTML = duration;
}
});
}
});
});
}
google.maps.event.addDomListener(window, 'load', mapInit);
</script>
text file:
{"places": [{
"title": "Cooke City, MT",
"description": "TEXT",
"lat": 45.02009497,
"lng": -109.93234595
},
{
"title": "Silver Gate, MT",
"description": "TEXY",
"lat": 45.00687965,
"lng": -109.98979568
},
{
"title": "Absarokee, MT",
"description": "TEXT",
"lat": 45.52004697,
"lng": -109.44136186
},
{
"title": "Billings, MT",
"description": "TEXT",
"lat": 45.78333000,
"lng": -108.50000000
},
{
"title": "Bridger, MT",
"description": "TEXT",
"lat": 45.28568200,
"lng": -108.90821700
},
{
"title": "Cody, WY",
"description": "TEXT",
"lat": 44.52313500,
"lng": -109.07561100
},
{
"title": "Columbus, MT",
"description": "TEXT",
"lat": 45.62617100,
"lng": -109.25712600
},
{
"title": "Gardiner, MT",
"description": "TEXT",
"lat": 45.03049875,
"lng": -110.70471900
},
{
"title": "Nye, MT",
"description": "TEXT",
"lat": 45.43584263,
"lng": -109.80859757
},
{
"title": "Joliet, MT",
"description": "TEXT",
"lat": 45.48287830,
"lng": -108.97241592
}]}
Any ideas about populating the duration/distance in the infoWindow?
Help appreciated!
Thanks,
Sam
ps I apologize for any ugly scripting. I’m learning as I go and appreciate any thoughts on making this script more efficient!
i might be wrong but from looking at your code:
you are poulating divs in the dom with the distance/duration.
assuming the info is appearing in the divs ok…
to get it into the info window you would need to use: