How to get the google map linked to a div? - google-maps

Question

I have set a google maps (api v3) on div.
Then I want to retrieve the map via the div.
Doing something like
theMap = $('.myDiv').theGoogleMap;
I can't find this simple info. Thank you for your help.

Answer 1

Maybe this it's too late for the original poster, but might helpful for others. I also spent some time searching before solving it by myself. Turns out to be really simple.
Assuming the div that holds the map looks like this:
<div id="myMap"></div>
When creating the map, add a reference to map object as a property to the document element that holds the map:
// Create the map
originalMapObject = new google.maps.Map('myMap', map_options);
// Get the DOM Element
var element = document.getElementById('myMap');
// Create a random property that reference the map object
element.gMap = originalMapObject;
When you need the map object again, just do something like this
gmap = document.getElementById('myMap').gMap
Hope it helps.

Answer 2

well, you can't do that, you can declare a global variable and save in that variable the reference to the map object. Look at the sample in the google documentation.
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Also here is a Javascript tutorial:
https://developer.mozilla.org/en/JavaScript/Guide

Answer 3

The API doesn't work that direction. You must retain a reference to the object in javascript when you create it. You cannot lookup the map object from the DOM reference.