Initializing a Google Map With jQuery

Question

I am just starting out with Google Maps API v3 and jQuery. I have made maps before with the v2 API, but it didn't use jQuery. This way will hopefully help me learn some more jQuery on the way. I am following the example on the Google Maps API Tutorial and trying to get their most basic hello world work with jQuery. I am also using the Google Maps API3 Visual Studio Intellisense helper.

My main page is as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Page</title>
<link href="style/main.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="scripts/google-maps-3-vs-1-0.js"></script>
<script src="scripts/mdaMap.js"></script>
<script type="text/javascript">
    $(function () {
        map = new google.maps.Map($("#map-canvas"), startMapOptions);
    });
</script>
</head>
<body>
    <div id="map-canvas" />
</body>
</html>

mdaMap.js contain's the following:

/// <reference path="jquery-1.10.2.js" />
/// <reference path="google-maps-3-vs-1-0.js" />

var map;
var startMapOptions = new google.maps.MapOptions;
var startCenterLocation = new google.maps.LatLng(32.912229, -88.692627);
var startZoomLevel = 7;
var startMapTypeId = google.maps.MapTypeId.ROADMAP;

I'm trying to get this working with just some basic jQuery to load the map into a specific element, rather than using Google's tutorial code of google.maps.event.addDomListener(window, 'load', initialize);

What is it I am missing? My jQuery knowledge is limited, but I thought I at least knew how to do selectors and have script run when the page was ready with $(function() {})'

Or is my mistake in thinking that a map can be initialized other than the above mentioned way with addDomListener?

ilyass · Accepted Answer · 2013-11-15 16:27:46Z

4

You need a dom element not a jquery object

  <script type="text/javascript">
      $(function () {
        map = new google.maps.Map($("#map-canvas").get(0), startMapOptions);
      });
  </script>

answered Nov 15, 2013 at 16:27

ilyass

4022 silver badges9 bronze badges

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

4 Comments

Adam H Over a year ago

Can you help me understand what a selector is doing then, compared to getting a dom element? I thought jQuery selectors would return dom elements (but as I said I am new to jQuery).

Adam H Over a year ago

Your answer also got me a step closer. Now my map-canvas is filled in with grey, so I assume I am just now using the map API wrong. But my question wasn't about that, so I'll mark your's as an answer. Thanks!

ilyass Over a year ago

@Adam H $("#selector") give you a jquery object. $("#selector").get(0) == document.getElementById("selector"). You should try a console.log on a jquery object and you will see what behind the magic ;)

Adam H Over a year ago

I obviously need to go back to some jQuery basics and understand what the selectors are doing and how it's not as I thought. I had always assumed a jQuery object was just part of the DOM. But I don't want to get off track on a question that was about initializing a Google Map. Thanks to you both for your input.

Collectives™ on Stack Overflow

Initializing a Google Map With jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related