Why does Internet Explorer break "pegman" display in Google Maps API v3?
- by Chad
On my site here, the SteetView control, aka "Pegman", works great under Firefox. Under IE (7 in this case, but tested on 8 as well - same result) it breaks the display of the pegman control.
Here's my map code:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
directionsDisplay = new google.maps.DirectionsRenderer();
var milBase = new google.maps.LatLng(35.79648921414565, 139.40663874149323);
var mapOpts = {
streetViewControl: true,
zoom: 12,
center: milBase,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#dirMap").get(0), mapOpts);
directionsDisplay.setMap(map);
var basePoly = new google.maps.Polygon({
paths: [new google.maps.LatLng(35.724496338474104, 139.3444061279297), new google.maps.LatLng(35.74748750802863, 139.3363380432129), new google.maps.LatLng(35.75765724051559, 139.34303283691406), new google.maps.LatLng(35.76545779822543, 139.3418312072754), new google.maps.LatLng(35.767547103447725, 139.3476676940918), new google.maps.LatLng(35.75835374997911, 139.34955596923828), new google.maps.LatLng(35.755149755962755, 139.3567657470703), new google.maps.LatLng(35.74679090345495, 139.35796737670898), new google.maps.LatLng(35.74762682821177, 139.36294555664062), new google.maps.LatLng(35.744422402303826, 139.36346054077148), new google.maps.LatLng(35.74860206266584, 139.36946868896484), new google.maps.LatLng(35.735644401200986, 139.36843872070312), new google.maps.LatLng(35.73843117306677, 139.36174392700195), new google.maps.LatLng(35.73592308277646, 139.3531608581543), new google.maps.LatLng(35.72686543236113, 139.35298919677734), new google.maps.LatLng(35.724496338474104, 139.3444061279297)],
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
basePoly.setMap(map);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.79648921414565, 139.40663874149323),
map: map,
title: "Ruby International"
});
function calcRoute() {
var start = new google.maps.LatLng(35.74005964772476, 139.37083393335342);
var end = new google.maps.LatLng(35.79648921414565, 139.40663874149323);
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
The only real difference from my code and Google's code is that I use jQuery's document ready function instead of the body onload event to initialize my map. Can't imagine that's the cause though (works in v2 of the maps).
Have I found a bug or is there something wrong in my code?
Thanks in advance!
