Map

Create a map

First of all, you need to initialize the map plugin. Call the getMap() method of the Map class. The map class raises MAP_READY event when the map is initialized. You can receive the event with either addEventListener() or on() method.

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

---

Create a map with initialize options

You can initialize the camera view when the map is initialized. 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 // Only for Android
  },
  'gestures': {
    'scroll': true,
    'tilt': true,
    'rotate': true,
    'zoom': 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 the hiding and showing. See more the detailed explain in the #50

###Listen events You can listen several events, such as map clicked. Available events for Map class are the below:

• MAP_CLICK
• MAP_LONG_CLICK
• MY_LOCATION_BUTTON_CLICK
• CAMERA_CHANGE
• CAMERA_IDLE(iOS)
• MAP_READY
• MAP_LOADED(Android)
• MAP_WILL_MOVE(iOS)
• MAP_CLOSE

example1

var evtName = plugin.google.maps.event.MAP_LONG_CLICK;
map.on(evtName, function(latLng) {
  alert("Map was long clicked.\n" +
        latLng.toUrlValue());
});

example2

document.addEventListener("deviceready", function()  {
  var div = document.getElementById("map_canvas");
  var map = plugin.google.maps.Map.getMap(div);

  map.on(plugin.google.maps.event.CAMERA_CHANGE, onMapCameraChanged);
}
function onMapCameraChanged(position) {
  var map = this;
  console.log(JSON.stringify(position));
}

---

###Change the map type You can choose the map type using setMapTypeId() method. Available map types are ROADMAP, SATELLITE, HYBRID, TERRAIN and NONE.

map.setMapTypeId(plugin.google.maps.MapTypeId.HYBRID);

---

###Move the camera Google Maps for mobile has a view camera. You see the map via the camera, thus if you want to show a specific location, you need to move the camera. To do that, this plugin provides animateCamera() and moveCamera() methods. The animateCamera() moves the camera with animation, while the other hand without animation. Default animation time of animateCamera() method is 5 seconds.

map.animateCamera({
  'target': GOOGLE,
  'tilt': 60,
  'zoom': 18,
  'bearing': 140
});

Both methods take a callback function as the second argument. This callback is involved when the movement is finished.

map.moveCamera({
  'target': STATUE_OF_LIBERTY,
  'zoom': 17,
  'tilt': 30
}, function() {
  var mapType = plugin.google.maps.MapTypeId.HYBRID;
  map.setMapTypeId(mapType);
  map.showDialog();
});

---

###Move the camera within the specified duration time The animateCamera() acepts the duration time for animating with duration option. If you want to animate slowly, you can specify the duration in millisecond.

map.animateCamera({
  'target': GOOGLE,
  'tilt': 60,
  'zoom': 18,
  'bearing': 140,
  'duration': 10000
});

---

###Get the camera position If you want to know the camera position, just call getCameraPosition() method.

map.getCameraPosition(function(camera) {
  var buff = ["Current camera position:\n",
      "latitude:" + camera.target.lat,
      "longitude:" + camera.target.lng,
      "zoom:" + camera.zoom,
      "tilt:" + camera.tilt,
      "bearing:" + camera.bearing].join("\n");
  alert(buff);
});

---

###Get my location If you want to know where you are, just call getMyLocation() method.

var onSuccess = function(location) {
  var msg = ["Current your location:\n",
    "latitude:" + location.latLng.lat,
    "longitude:" + location.latLng.lng,
    "speed:" + location.speed,
    "time:" + location.time,
    "bearing:" + location.bearing].join("\n");
  
  map.addMarker({
    'position': location.latLng,
    'title': msg
  }, function(marker) {
    marker.showInfoWindow();
  });
};

var onError = function(msg) {
  alert("error: " + msg);
};
map.getMyLocation(onSuccess, onError);

---

###Get the visible region If you want to know the coordinates of the corners (Left/Top and Right/Bottom), call the map.getVisibleRegion().

map.getVisibleRegion(function(latLngBounds) {
  alert(latLngBounds.northeast.toUrlValue() + ", " + latLngBounds.southeast.toUrlValue()); 
});

---

###Detect in the bounds or not If you want to know the coordinate is in the region, use contains method of the LatLngBounds. The LatLngBounds object returns only with the map.getVisibleRegion() currently.

map.getVisibleRegion(function(latLngBounds) {
  var point = new plugin.google.maps.LatLng(0, 0);
  var isContained = latLngBounds.contains(point);
  alert(point.toUrlValue() + " is" + (isContained ? " " : " not ") + " contained in this bounds.");
});

---

#Map Class Reference

Method	Return value	Description
getMap()	Map	Return the instance of a Map class. Plugin does not make multiple maps.
isAvailable(Function)	Map	Check the availability of Google Maps Android API v2
showDialog()	void	Open the map dialog.
closeDialog()	void	Hide the map dialog.
getLicenseInfo(Function)	void	Return the license text of the Google Maps SDK.
setCenter(LatLng)	void	Set the center position of the camera view.
setZoom(Number)	void	Set the camera zoom.
setMapTypeId(String)	void	Change the map type.
setTilt(Number)	void	Change the angle of the camera view.
animateCamera(CameraPosition)	void	Change the camera position with animation.
moveCamera(CameraPosition)	void	Change the camera position without animation.
setMyLocationEnabled(Boolean)	void	Set true if you want to show the MyLocation button.
setIndoorEnabled(Boolean)	void	Set true if you want to show the indoor map.
setTrafficEnabled(Boolean)	void	Set true if you want to show the traffic layer.
setCompassEnabled(Boolean)	void	Set true if you want to show the compass button.
setAllGesturesEnabled(Boolean)	void	Sets the preference for whether all gestures should be enabled or disabled.
getMyLocation(Function, Function)	void	The callback function will be involved with current your location as Location data.
getCameraPosition(Function)	void	The callback function will be involved with current camera position as CameraPosition data.
addMarker(options)	Marker	Add a marker on the map. See Marker class
addCircle(options)	Circle	Add a circle on the map. See Circle class.
addPolygon(options)	Polygon	Add a polygon on the map. See Polygon class.
addPolyline(options)	Polyline	Add a polyline on the map. See Polyline class.
addTileOverlay(options)	TileOverlay	Add a tile overlay on the map. See TileOverlay class.
addGroundOverlay(options)	GroundOverlay	Add a ground overlay on the map. See GroundOverlay class.
setDiv(DOM node)	void	Embed a map into the specified DOM node.
setVisible(boolean)	void	If set false, the map is hidden.
setOptions(options)	void	Set the attributions of the map
clear()	void	Remove all mark-ups, such as marker.
refreshLayout()	void	Force recalculate the map view location when the map is embedded.
toDataURL(Function)	void	Generate the map screen capture image as base64 encoded data, like HTML5's Canvas.
getVisibleRegion(Function)	void	Get the latitude and longitude coordinates of the corner of the map as LatLngBounds.
remove()	void	Destroy the map completely.