Working with Google Map object (for Javascript programmers)

This section describes how to access the original Google Map object - Javascript object that is used in creation of the map.

The map object

The MapEx creates a global Javascript variable called WidgetkitMaps. It's an array of objects, each object has following fields:

• id - the unique id of the widget. This id is generated randomly every time the web page is displayed. This id is assigned to the id attribute of the div tag of the MapEx widget. The id is a string of a form wk-map-exXXX, where XXX - is a random sequence of digits and letters.
• map - the Google Map object used for the widget.

Global Javascript functions available:

• function getWidgetkitMap(id) - returns map object for specified id or null if object with this id not found.

Map object usage examples (Javascript)

It may not be obvious how to know the id of desired map if the id is generated randomly. In this case you may put the widget inside a div with predefined HTML id attribute, e.g.:

<div id="my_map">
	[widgetkit id="12"]
</div>

Now we can use the following Javascript code as an example:

<script>
	jQuery(function($){
		//Get the id of the widget based on the HTML container id:
		var map_id = $('#my_map>div').attr('id');
		if (!map_id){
			console.log("Error! MapEx widget not found");
			return;
		}
		
		//Get the map object by its widget id
		var map_object = getWidgetkitMap(map_id);
		if (!map_object){
			console.log("Error! Failed to get the MapEx object");
			return;
		}

		//Now you can interact with the map object, for example, let's change the zoom level of the map
		map_object.setZoom(8); 
	});
</script>