Hi All,
I have code to generate a route in google maps on my site.
The code works great in Firefox but not in IE8.
It works in IE8 if you just have just a start and finish only but whe you add a waypoint in the route does not show.
Any ideas?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var directionDisplay;
var geocoder;
var directionsService = new google.maps.DirectionsService();
var latlng = new google.maps.LatLng(54.559322587438636, -4.1748046875);
function load() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT}
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsDisplay.setMap(map);
var directionRendererOptions ={
suppressMarkers: true,
polylineOptions:{
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
};
directionsDisplay.setOptions(directionRendererOptions);
var start = '<?php echo $start; ?>';
var end = '<?php echo $end; ?>';
<?php
if($via != null){
echo "var points = [";
foreach($via as $point){
if($point != ""){
echo "{location:";
echo " '".$point."'";
echo "},";
}
}
echo "];\n";
}
?>
var request = {
origin:start,
waypoints: points,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
geocoder.geocode( { 'address': start}, function(results, status) {
var routeStart = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: './images/motorcycling.png',
shadow: './images/motorcycling.shadow.png'
});
});
geocoder.geocode( { 'address': end}, function(results, status) {
var routeEnd = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: './images/motorcyclingend.png',
shadow: './images/motorcycling.shadow.png'
});
});
<?php
$adverts = mysql_query("SELECT * FROM adverts WHERE ad_area = '$county' AND ad_visible='1' ");
while($ad_row = mysql_fetch_array($adverts)){
$position = $ad_row[ad_postcode];
$type = $ad_row[ad_type];
echo "var position".$ad_row[ad_id]." = '".$position."'\n";
$ad_id = $ad_row[ad_id];
$pics = mysql_query("SELECT * FROM photos WHERE ad_id = '$ad_id' AND main_pic = '1'");
$pic_row = mysql_fetch_array($pics);
$pic_name = $pic_row[photo_name];
$pic_name = str_replace(' ', '%20', $pic_name);
?>
geocoder.geocode( { 'address': position<?php echo $ad_row[ad_id]; ?>}, function(results, status) {
var marker<?php echo $ad_row[ad_id]; ?> = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
<?php
if ($type == 'accommodation'){
echo "icon: 'images/hotel.png'\n";
}elseif($type == 'fooddrink'){
echo "icon: 'images/bar.png'\n";
}elseif($type == 'essentials'){
echo "icon: 'images/motorcycle.png'\n";
}
?>
});
var content = "<p><\a style='color:black;' href='./advert.php?advert=<?php echo $ad_row[ad_id]; ?>'><?php echo $ad_row[ad_company]; ?><\/a></p><img src='./thumbs/<?php echo $pic_name; ?>' />";
var infowindow<?php echo $ad_row[ad_id]; ?> = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker<?php echo $ad_row[ad_id]; ?>, "click", function() {
infowindow<?php echo $ad_row[ad_id]; ?>.open(map,marker<?php echo $ad_row[ad_id]; ?>);
});
});