Basic google map - Cant get it to display

Question

I'm trying to learn how to code HTML and javascript but no matter what I do I can't get the map t display in the "main" div here on my site:

http://jsfiddle.net/W4mXP/10/

HTML:

<html>
    <head>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    </head>
    <body>
    <!-- Header -->
    <div id="topbar">
        <div class="left">
        Logo
        </div>
        <div class="right">
<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
  </div>
</form>
        </div>
    </div>
    <!-- Map -->
    <div id="main"></div>
    <!-- Footer -->
    <div id="bottombar">
        <div class="left">
        Name
        </div>
        <div class="right">
        About
        </div>
    </div>
    </body>
</html>

JS:

var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('main'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

Can someone please tell me where I am going wrong?

possible duplicate of [Fluid-width Google maps](http://stackoverflow.com/questions/8768580/fluid-width-google-maps) [jsfiddle](http://jsfiddle.net/W4mXP/20/) — geocodezip, Feb 14 '13 at 14:28

score 1 · Accepted Answer · answered Feb 14 '13 at 12:05

1

http://jsfiddle.net/W4mXP/19/

You need to apply the absolute height and width to the map container and change the initialize mode

$(document).ready(function($) {
    initialize();
});

See the changes that I make

answered Feb 14 '13 at 12:05

red_alert

1,738
14
24

He shouldn't need to change to use document.ready - the Google event listener for the window load event should be sufficient. – duncan Feb 14 '13 at 12:09
... unless you're alluding to the same problem @dmk is pointing out, which is with it not working on jsfiddle – duncan Feb 14 '13 at 12:27

score 0 · Answer 2 · answered Feb 14 '13 at 12:14

I guess the problem is that your js in jsFiddle is executed on window load event (you can change that in the menu on the left) so google maps load event never getting fired because everything is loaded already.

Change that option in jsFiddle to onDomReady and it should work fine.

http://jsfiddle.net/G6YMm/

Basic google map - Cant get it to display

2 Answers2