Google Maps Places API Map not showing up

Question

I just started working with the google maps places API and have been able to pull together this code but the map doesn't show up. I would imagine it is a small error somewhere but I can't find it. If anyone could point it out that would be a huge help and also is there anywhere online or any free IDEs that are good for catching errors like this?

Code: http://jsbin.com/ifuwel/1/edit

Answer 1

You have 2 different IDs ("map" and "map_canvas"). Try that:

map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 15
});

Answer 2

Try this basic example

HTML

 <body onload="initialize()">
   <div id="map_canvas"></div>
 </body>

Javascript

    <script>
  function initialize() {
    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      panControl: false,
      zoomControl: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);
  }
</script>

CSS

    <style>
     html, body {
     height: 100%;
     margin: 0;
     padding: 0;
      }

     #map_canvas {
     height: 100%;
     }

     @media print {
     html, body {
     height: auto;
     }

     #map_canvas {
     height: 650px;
     }
      }
    </style>

CSS help to have 100% of the width and height if desired

Google Maps Places API Map not showing up

Question

2 answers

solution1
2 ACCPTED 2012-09-07 15:44:32

solution2
-2 2012-09-07 16:05:10

Google Maps Places API Map not showing up

Question

2 answers

solution1 2 ACCPTED 2012-09-07 15:44:32

solution2 -2 2012-09-07 16:05:10

solution1
2 ACCPTED 2012-09-07 15:44:32

solution2
-2 2012-09-07 16:05:10