Home

MapWrapper is a Javascript library which allows you to use several map engines on a web page simultaneously, in one place and reflecting position and zoom values.

Features:

• Place several maps in one div.
• Allow switching between them via a so called switch control.
• Subscribe to switch engine event.
• Easy to use, easy to extend.

Simple usage

Here you can use MapWrapper the most simple way.
There’s also a classic usage, which is more verbose, but more object-oriented and reflecting the internal structure of the MapWrapper.
If you just want to use MapWrapper in usual cases, you probably want to choose the Simple way. If you want to extend or understand it, you may prefer the Classic way.

Don’t forget to load the map API which you want to use: the MapWrapper doesn’t load it automatically, because in most of APIs you have to supply the key of your site (that’s for example for Google Maps before the 3rd version, for Yandex Maps, etc.)

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=MY_KEY"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=MY_KEY" type="text/javascript"></script>
...........................................
var mw = new MapWrapper('map')
var gmap = mw.add('google')
var ymap = mw.add('yandex')
mw.select('google')
...........................................
<div id="map" style="height: 800px; width: 600px;"></div>

Here you create a MapWrapper with default parameters and add engines (i.e. the map APIs themselves) to this wrapper-container.
gmap and ymap returned by the add() method are GMap2 and YMaps.Map objects respectively. You may use them as usual for custom API options.

Classic way

var mw = new MapWrapper('map')
var ge = new GoogleEngine()
mw.addEngine(ge)
var ye = new YandexEngine()
mw.addEngine(ye)
mw.selectEngine(ye)
var gmap = ge.getNativeControl()
var ymap = ye.getNativeControl()
...........................................
<div id="map" style="height: 800px; width: 600px;"></div>