Why does Internet Explorer break "pegman" display in Google Maps API v3?

Posted by Chad on Stack Overflow See other posts from Stack Overflow or by Chad
Published on 2010-05-26T03:44:01Z Indexed on 2010/05/26 4:11 UTC
Read the original article Hit count: 535

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);

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

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) {

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about asp.net-mvc