Home/ Questions/Q 6661683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:18:35+00:00

I’m following the introductory tutorial for Google Maps, but for some reason the map

  • 0

I’m following the introductory tutorial for Google Maps, but for some reason the map is not appearing on my webpage. The relevant HTML/CSS/JS is:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }

    </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>

</html>

The map does not appear within the map_canvas div.

Update

I’ve changed the page so that it doesn’t use JQuery to load the map. It now uses exactly the same JS as in the tutorial, but still the map does not appear.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are 3 problems with your code:

    (1) add the following lines before <script type="text/javascript">function initialize() {

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

    This is in the post of your answer, but it is not in your file http://www.iol.ie/~murtaghd/map/map.htm.

    (2) You need to call initalize() (again: it is in your post, but not in the code):

    <body onload="initialize();">

    (3) Set the size of the canvas to get the map displayed (again: it is in your post, but not in the code). Afterwards you can change the size as you like.

    <div id="map_canvas" style="width:500px; height:300px"></div>

    You can see the site running on jsfiddle.

    • 0