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

Google Maps API Javascript - Map not showing


I have the following code in my webpage - the map div is not showing the google map but I can't find anything wrong with the code:

$mapCode = "<script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=$google_maps_apiKey\" type=\"text/javascript\"></script>
   <div id=\"map_canvas\" style=\"width: 500px; height: 500px\"></div>
<script type=\"text/javascript\">
    function showAddress(address) {
        var map = new GMap2(document.getElementById('map_canvas'));
         alert(\" not found\");
         var geocoder = new GClientGeocoder();
         geocoder.getLatLng(
         address,
              function(point) {
                   if (!point) {
                      alert(address + \" not found\");
                   } else {
                      map.setCenter(point, 13);

                      var marker = new GMarker(point);
                      map.addOverlay(marker);
                   }
               }
             );
           }
showAddress(\"$address\");
</script>";

echo $mapCode;

Any help is much appreciated. Thanks


Solution

  • I just got it to work by physically telling it a height.... in my css I put:

    #map_canvas {
         height:100px; margin: 0; padding: 0;
    }
    

    instead of

    #map_canvas {
         height:100%; margin: 0; padding: 0;
    }
    

    don't know why it didn't originally work...