Skip to content

Working with Google Map object (for Javascript programmers)

Ramil Valitov edited this page Jan 18, 2016 · 4 revisions

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)

Detecting the id

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>

In this case you can get the id of the widgetkit with the following code:

<script>
	jQuery(document).ready(function($){
		var map_id=$('#my_map>div').attr('id');
	});
</script>

Getting the map object

Now we can get the map object by its id:

<script>
	var map_object=getWidgetkitMap(map_id);
</script>

Interacting with the map object

Assume, we want to change the zoom level of the map manually:

<script>
	map_object.setZoom(8);
</script>