I had to do a bit of coding to get this working. First I added a function to the page:
function addDirections(fromAddress,toAddress,isDefault,map,icon,point) {
var marker = new google.maps.Marker({
position: point,
shadow: icon.shadow,
icon: icon.image,
shape: icon.shape,
title: toAddress
});
if (fromAddress && isDefault) {
var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("wagmp_directions_3"));
var request = {
origin: fromAddress,
destination: toAddress,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
fromicon = {
image: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/icon_greenA.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)),
shadow: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/traditionalflat_shadow.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)),
shape: {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
}
}
marker.setIcon(new google.maps.MarkerImage('plugins/webassist/google_javascript/images/icon_greenB.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)));
marker.setShadow(new google.maps.MarkerImage('plugins/webassist/google_javascript/images/traditionalflat_shadow.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)));
var leg = result.routes[ 0 ].legs[ 0 ];
var frommarker = new google.maps.Marker({
position: leg.start_location,
title: fromAddress,
shadow: fromicon.shadow,
icon: fromicon.image,
});
var frominfowindow = new google.maps.InfoWindow({
content: ('<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><strong>From:</strong><br />' + fromAddress.substring(0,fromAddress.indexOf(",")) + "<br />" + fromAddress.substring(fromAddress.indexOf(",")+1,fromAddress.lastIndexOf(",")) + "<br />" + fromAddress.substring(fromAddress.lastIndexOf(",")+1) + "</span>").replace("'", "\\'")
});
google.maps.event.addListener(frommarker, 'click', function() {
frominfowindow.open(map,frommarker);
});
frommarker.setMap(map);
}
});
}
}
then I went into the google map code and updated the infowindowtext field for each of the map points:
infowindowtext: '<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><?php echo str_replace("'", "\'", "<strong>Get Directions From Postal Code:</strong><form onsubmit='return false'><input type='text' name='from' value=''/><input type='button' value='get directions' onclick='addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[0].full,true,wagmp_map_3_obj.obj,wagmp_map_1_obj.icons[0],wagmp_map_1_obj.points[0]);' /></form><strong>Address:</strong><br />353 lado de loma<br />vista, ca 92083 US"); ?></span>',
the part that I actually added is:
<strong>Get Directions From Postal Code:</strong><form onsubmit='return false'><input type='text' name='from' value=''/><input type='button' value='get directions' onclick='addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[0].full,true,wagmp_map_3_obj.obj,wagmp_map_1_obj.icons[0],wagmp_map_1_obj.points[0]);' /></form>
Which adds the get directions option directly into the info window itself... that way each point can have its own get directions option. You would get rid of the get directions form you have on top of the page since this is a different technique to allow for different directions for the different points.
You would replace the [0] with [1] for the second info window each time it appears.
Let me know if that works for you.
If you don't want any info windows open by default you can comment out the line:
infowindow.open(map,marker);
like:
//infowindow.open(map,marker);
Did this help? Tips are appreciated...
