Search code examples
google-mapsgoogle-maps-api-2

Google Maps Canvas Not displaying

I have a map that is not displaying.

The page loads all the controls but the map canvas fails to load. I'm not sure where to look as this map was working fine for years but I have updated the html and it has since stopped working (see attached)

I have tried stripping it down to bare bones to see if I can get it working (i.e. just the map, a point and a marker) but nothing... I am using v2 - GMap2

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHXuavtLbrkcGH6cQdo3gBBS4qDQlwPUwKySmZaFjOqYCz5LrLRQqZperPeQ8BVZogxQeWtkVuxYdcQ" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    //<![CDATA[

    var map = null;

    function mapOnLoad() {
        if (GBrowserIsCompatible()) {

            var mapObj = document.getElementById("map");

            if (mapObj != "undefined" && mapObj != null) {
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(-38.165295, 145.188317), 15, G_NORMAL_MAP);
                map.addControl(new GLargeMapControl3D());
                map.addControl(new GMenuMapTypeControl());
                map.addControl(new GScaleControl());
                var point = new GLatLng(-38.1652950000,145.1883170000);
                map.addOverlay(new GMarker(point));

            } else {
                alert("The map could not be displayed on your browser.");
            }
        }
    }
    //]]>
    </script>

<div id="map" class="map" style=""></div>

Please help!

Map Not Displaying

Solution

  • Work for me, try this :

    <html>
<head>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHXuavtLbrkcGH6cQdo3gBBS4qDQlwPUwKySmZaFjOqYCz5LrLRQqZperPeQ8BVZogxQeWtkVuxYdcQ" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    //<![CDATA[

    var map = null;

    function mapOnLoad() {
        if (GBrowserIsCompatible()) {

            var mapObj = document.getElementById("map");

            if (mapObj != "undefined" && mapObj != null) {
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(-38.165295, 145.188317), 15, G_NORMAL_MAP);
                map.addControl(new GLargeMapControl3D());
                map.addControl(new GMenuMapTypeControl());
                map.addControl(new GScaleControl());
                var point = new GLatLng(-38.1652950000,145.1883170000);
                map.addOverlay(new GMarker(point));

            } else {
                alert("The map could not be displayed on your browser.");
            }
        }
    }
    //]]>
</script>
</head>
<body onload="mapOnLoad()" onunload="GUnload()">
    <div id="map" class="map" style="width: 500px; height: 300px"></div>
</body>