jQuery and the brand new Google Maps API 3 can live together in a happy union, provided that we follow certain rules while writing our jQuery code. First of all, the traditional jQuery's selector chain seems not to work inside Google Maps objects, so we're forced to use the traditional DOM approach using $(element)[0] in our element selection. Second, the jQuery's method $.extend() can actually be deployed to extend Google Maps objects and create our custom classes.
First things first. We need to include the Google APIs using this code:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Google Maps API 3 don't require a developer key, so all you need is the above code. Once included the APIs, you can include jQuery as well. Done that, it's time to use jQuery. First, we extend the google.maps object with $.extend():
var myGmaps = $.extend(google.maps, {});
Now all the properties and methods of the original object are also contained within myGmaps. Then we can create our first map:
function initialize() {
var latlng = new myGmaps.LatLng(41.580, 12.400);
var options = {
zoom: 8,
center: latlng,
mapTypeId: myGmaps.MapTypeId.ROADMAP
};
var map = new myGmaps.Map($('#map-canvas')[0], options);
}
$(document).ready(function() {
initialize();
});
As you can see, our myGmaps object works as expected. Note also how we had to reference our map element on the page by using the DOM notation instead of the traditional selector chain.
Unless I'm missing something, jQuery.extend takes the properties from the second object passed (and any further objects) and puts them into the first object passed, returning the first object. Since your second object has no properties, that means
var myGmaps = $.extend(google.maps, {});
is really the same as
var myGmaps = google.maps;
You're not copying the maps object but just making a synonym for it. But the code still works.
http://api.jquery.com/jQuery.extend/
$.extend() makes a deep copy of the first object passed as 1st parameter to the second object passed as 2nd parameter. Since the second object in this case is an empty object, the copy actually takes place and works, even if the 2nd object is empty. So we're not creating a synonym, but a brand new object. When you perform a deep copy, you take advantage of the syntax obj[property] = value to augment your target object. it works this way:
1. cycle through the members contained in the prototype object of the object to be cloned
2. augment the target object with the syntax obj[prop] = value
3. return the new object
in this case:
1. var myGmaps = {}; // target is empty
2. $.extend(google.maps) // object to be cloned
3. myGmaps.Map();
(3) works because now myGmaps has in its prototype the Map() object.