Question

Hi I have a website that uses Google Maps API v3 for members locations.

But with Internet Explorer I have a couple of issues:

1.- When the website loads the javascript it throws an errror (only on IE):_

Message: Invalid property value.
Line: 33
Char: 212
Code: 0
URI: http://maps.gstatic.com/cat_js/intl/en_gb/mapfiles/api-3/4/7/%7Bmain,geometry%7D.js

This is the JS I’m loading:
http://maps.google.com/maps/api/js?libraries=geometry&sensor=true

This is the last part of that file (the part that cause the problem):

[...]
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_gb/mapfiles/api-3/4/7/%7Bmain,geometry%7D.js");
})();

2.- The map loads and shows the correct position but it doesn’t show any controls and is not possible to interact with the map (this is probably because of the first error)

Does anybody know how to fix that?

Thanks!

EDIT ————————–

Here are the functions I use to load the map:

function initialize() {

    london = new google.maps.LatLng(51.5, 0);
    uk = new google.maps.LatLng(55.7, -4 );

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 12,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map_canvas = document.getElementById("map_canvas");

    map = new google.maps.Map(map_canvas, myOptions);


    google.maps.event.addListener(map, 'mouseover', function(event) {
        $(map_canvas).ancestors()[0].addClassName("bigGMap");
    });

    google.maps.event.addListener(map, 'mouseout', function(event) {
        $(map_canvas).ancestors()[0].removeClassName("bigGMap");
    });


    google.maps.event.addListenerOnce(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    getMyLocation();


}

function getMyLocation()
{
    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
        // Try Google Gears Geolocation
    } else if (google.gears) {
        browserSupportFlag = true;
        var geo = google.gears.factory.create('beta.geolocation');
        geo.getCurrentPosition(function(position) {
          initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
          map.setCenter(initialLocation);
        }, function() {
          handleNoGeoLocation(browserSupportFlag);
        });
        // Browser doesn't support Geolocation
    } else
    {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
    }

}

function handleNoGeolocation(errorFlag) {
    map.setZoom(6),
    map.setCenter(uk);
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}


function loadMapScript() {
  var map_api = document.createElement("script");
  var gears = document.createElement("script");

  map_api.type = "text/javascript";
  map_api.src = "http://maps.google.com/maps/api/js?libraries=geometry&sensor=true&callback=initialize";

  gears.type = "text/javascript";
  gears.src = "http://code.google.com/apis/gears/gears_init.js";

  document.body.appendChild(map_api);
  document.body.appendChild(gears);
}

Answer 1

Ok, I finally found the problem. It’s in the initialize function

function initialize() {

    london = new google.maps.LatLng(51.5, 0);
    uk = new google.maps.LatLng(55.7, -4 );


    var myOptions = {
        backgroundColor: '#FFFFFF ',
        zoom: 12,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    [...]

In the backgroundColor I had 5 F’s ‘#FFFFF’ instead of 6 ‘#FFFFFF’. And that’s all. Sorry for the post. But I hope it can help somebody to not waste to much time with that issue.