CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
techco1
techco1

Reputation: 11

Google Maps Issue with IE8 & Firefox

I am having some issues with the code below in IE8 & Firefox.

For some reason IE8 Errors saying 

Webpage error details

Message: 'null' is null or not an object
Line: 30
Char: 1472
Code: 0
URI: https://maps-api-ssl.google.com/intl/en_gb/mapfiles/api-3/5/4a/main.js

This is the code I am using ....

<link href="https://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-0, 0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = 'ACTUAL ADDRESS GOES HERE';

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        var latlng = new google.maps.LatLng(results[0].geometry.location);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
</script> 
<div id="map_canvas" style="height: 408px; width: 750px;"></div>  
<script> 
    initialize();
    codeAddress();
</script>

Can anyone help me? Not sure why this wont work in IE and Firefox!

Upvotes: 1

Views: 3333

Answers (1)

Trott
Trott

Reputation: 70065

initialize() is causing an error because the map canvas is null. The map canvas is null because getDocumentById can't find map_canvas. getDocumentById can't find map_canvas because IE needs the <div> to be inside a <body> tag.

This fixed your script in IE for me: 

<body>
<div id="map_canvas" style="height: 408px; width: 750px;"></div>  
<script> 
    initialize();
    codeAddress();
</script>
</body>

So make sure your document is well-formed HTML with <html>, <head>, and <body> tags all arranged appropriately.

Upvotes: 1

Related Questions