CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Richard
Richard

Reputation: 32959

JavaScript: Initialising Google Maps in an external script

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?

Upvotes: 3

Views: 3793

Answers (1)

psx
psx

Reputation: 4048

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

Upvotes: 3

Related Questions