CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps
Jimmy
Jimmy

Reputation: 12487

Basic google map - Cant get it to display

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?

Upvotes: 0

Views: 82

Answers (2)

dimusic
dimusic

Reputation: 4133

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/

Upvotes: 0

red_alert
red_alert

Reputation: 1728

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

Upvotes: 1

Related Questions