Map.getMap()

The Map.getMap() is a static method. You can grab a map instance.

###Description The Map.getMap() method returns an instance of the map class. The plugin initializes the native SDK and other thing, it takes a few second. The MAP_READY event is fired when the map is ready to go.

This plugin generates only one map instance using Map.getMap() method. In general, you may want to create multiple maps, but this plugin is not possible.

###Code

var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, function onMapInit(map) {
  // The map is initialized, then show a map dialog
  map.showDialog();
});

---

Create a map with initialize options

You can intialize the map status with options. This is useful when you want to show the specific location of the map.

const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);

var map = plugin.google.maps.Map.getMap({
  'mapType': plugin.google.maps.MapTypeId.HYBRID,
  'controls': {
    'compass': true,
    'myLocationButton': true,
    'indoorPicker': true,
    'zoom': true
  },
  'gestures': {
    'scroll': true,
    'tilt': true,
    'rotate': true
  },
  'camera': {
    'latLng': GORYOKAKU_JAPAN,
    'tilt': 30,
    'zoom': 15,
    'bearing': 50
  }
});

---

###Embed a map into a div tag You can also implement the map into your app design. Declare the container DOM (such as DIV), then specify it.

<div id='map_canvas' style='width:300px;height:300px'></div>

var div = document.getElementById('map_canvas');
var map = plugin.google.maps.Map.getMap(div);

important

You must need to understand how to work this feature. The plugin does not watch any effects for the DOM element, such as CSS position changing, dead or alive. It means you can just tell the size and the position of the DOM element when you run Map.setDiv(). If you want to change the position of the map with the DOM element, you need to call Map.refreshLayout() (Don't too much).

Also, the map draws in the native view over the HTML browser view. This means you can not overlay any HTMLs above the map.

CSS transition

Many CSS frameworks loves CSS transition because it's easy and powerful. But W3C does not define the start event for CSS transition. It means the plugin can not detect when the CSS transition starts.

One of the common questions is How to slide the map with CSS?. This plugin does not watch the CSS positions and the above reason, you need to take care the map position by yourself.

One solution is that if your Javascript can detect when the div slides, you can generate an image data using Map.toDataURL(). You can pass it to <img> tag. It means:

1. generate the image using toDataURL()
2. then insert the map div, and hide the map
3. the sliding start
4. show the map, and remove the image when the sliding is finished.

However Map.toDataURL() takes a few time (how long is depends on device). As far as my test, Android works good with this idea, but iPhone takes the time longer.