JavaScript: Initialising Google Maps in an external script

Question

I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.

I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.

This is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script src="./js/jquery.js"></script>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true">
    <script src="./js/maps.js"></script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

This is maps.js in full:

$(document).ready(function () {
  console.log('document ready');
  function initializeMap() {
    console.log('initialize');
    var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
  initializeMap();
});

I don't see any of the console statements. I also don't see a map - just a blank screen.

I must be doing something stupid, but what is it?

psx · Accepted Answer · 2012-02-08 17:41:31Z

3

You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">

answered Feb 8, 2012 at 17:41

psx

4,0486 gold badges32 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript: Initialising Google Maps in an external script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related