Home/ Questions/Q 6158165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:54:40+00:00

For some reason a Google Map via the Javascript API is not loading correctly

  • 0

For some reason a Google Map via the Javascript API is not loading correctly in Internet Explorer.

It displays in Google Chrome & Firefox absolutely fine.

<!DOCTYPE html>
<html> 
    <head> 
        <title>Google Maps</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
        <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <style>
            #map_canvas {font: 12px Arial, Helvetica, sans-serif; color:#3B3B3B; height:400px; width: 700px;}
            .text {text-align:center; color:#3B3B3B;}
        </style>
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 
        <script type="text/javascript"> 
          var geocoder;
          var map;

          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            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 = '50 Bond Street, London';
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
              } else {
            //Not Found
              }
            });
          }
        </script> 
        <script type="text/javascript">
            initialize(); 
            codeAddress();
        </script>
    </head> 
    <body onload="initialize(); codeAddress();"> 
        <div id="map_canvas"></div> 
    </body> 
</html>

Strangely if I put a onmouseover on the Body and call the functions it seems to start working again? But it obviously reloads the maps each time!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see you are calling your functions from body onload event. Maybe the scripts are not loaded properly at that time?

    Try loading the api this way. You get to load the API ascynchronously and specify a callback function to initialize content.

    <script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D"></script> 
<script type="text/javascript"> 
  function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  google.setOnLoadCallback(initialize);
</script>

    [edit: previous solution did not work. Real solution is in the comments, I simply put it here]

    • 0