Marker class

April 20, 2019 · View on GitHub

:warning: This document is aim for older versions (from 2.3.0 to 2.5.3). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

Marker class

This class extends BaseClass.

Overview
API Reference

Overview

Create a marker

The map.addMarker() method adds a marker onto the map.

This method works after the MAP_READY event.

const GOOGLE = {"lat": 37.422476, "lng": -122.08425};

document.addEventListener("deviceready", function() {
  // Define a div tag with id="map_canvas"
  var mapDiv = document.getElementById("map_canvas");

  // Initialize the map plugin
  var map = plugin.google.maps.Map.getMap(mapDiv, {
    'camera': {
      'latLng': GOOGLE,
      'zoom': 17
    }
  });

  // You have to wait the MAP_READY event.
  map.one(plugin.google.maps.event.MAP_READY, onMapInit);
});

function onMapInit(map) {

  // Add a marker
  map.addMarker({
    'position': GOOGLE,
    'title': "Hello GoogleMap for Cordova!"
  }, function(marker) {

    // Show the infoWindow
    marker.showInfoWindow();

  });
}

Create multiple marker

If you want to create multiple marker, using BaseArrayClass would be better solution.

var data = [
  {
    position: {lng: -122.1180187, lat: 37.3960513},
    title: "Ardis G Egan Intermediate School"
  },
  {
    position: {lng: -122.1102408, lat: 37.3943847},
    title: "Portola School"
  },
  {
    position: {lng: -122.0848257, lat: 37.3818032},
    title: "Isaac Newton Graham Middle School"
  },
  {
    position: {lng: -122.1082962, lat: 37.3863294},
    title: "Los Altos High School"
  },
  {
    position: {lng: -122.013571, lat: 37.3874409},
    title: "The Kings Academy"
  },
  {
    position: {lng: -122.082462, lat: 37.3627189},
    title: "Georgina P Blach Intermediate School"
  },
  {
    position: {lng: -122.0421832, lat: 37.3766077},
    title: "Benner Junior High School"
  }
];

// Add markers
var bounds = [];
var markers = data.map(function(options) {
  bounds.push(options.position);
  return map.addMarker(options);
});

// Set a camera position that includes all markers.
map.moveCamera({
  target: bounds
});

// open the last marker.
markers[markers.length - 1].showInfoWindow();

Marker class extends BaseClass

Add your data, and hold them

Since Marker class extends BaseClass, you can set your custom values. Of course, listening the (key)_changed event is as well.

var marker = map.addMarker({
  position: { lat: 43.0741704, lng: -89.3809802},
  count: 0
});

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  marker.set("count", marker.get("count") + 1);
});


marker.on("count_changed", function(oldValue, newValue, key) {
  marker.setTitle("'" + key + "' is changed from '" +
                  oldValue + "' to '" + newValue + "'");
});

bindTo() method

bindTo() method is useful when you manipulate multiple overlays with the same value.

var marker = map.addMarker({
  position: {lat: 43.0741704, lng: -89.3809802},
  draggable: true
});

var circle = map.addCircle({
  center: marker.getPosition(),
  radius: 10,
  fillColor: "rgba(0, 0, 255, 0.5)",
  strokeColor: "rgba(0, 0, 255, 0.75)",
  strokeWidth: 1
});

// circle.center = marker.position
marker.bindTo("position", circle, "center");

Icon

SimpleIcon

You can use one of the following protocol: https, file, cdvfile and file absolute path.

var marker = map.addMarker({
  'position': GOOGLE_TOKYO,
  'title': 'Google Tokyo!',
  'icon': {
    'url': 'images/google_tokyo_icon.png'
   }
});

Color Icon

You can specify HTML color as icon. The alpha value is ignored.

black and white is not available for Android, because the native api accepts color as hue. This is not a bug, specification. Please read How to set the marker color to black in google maps android(Stack Overflow)

var marker = map.addMarker({
  position: {"lat": 0, "lng": 0},
  icon: 'blue',
  'title': "Hello World!\nThis plugin is very awesome!",
  'snippet': "Tap here!"
});

marker.showInfoWindow();

The marker's icon and title properties accept base64 encoded image strings. You can generate the base64 encoded strings using HTML5's Canvas object. This means you are able to create marker image programmatically.

var icon = "data:image/png;base64,iVBORw0KGgo...CC";
var canvas = document.createElement('canvas');
canvas.width = 120;
canvas.height = 40;
var context = canvas.getContext('2d');

var img = new Image();
img.src = "./images/google_logo.gif";
img.onload = function() {
  context.drawImage(img, 0, 0);

  context.font = '15pt Calibri';
  context.fillStyle = 'blue';
  context.fillText('Google', 40, 15);
  context.fillText('Tokyo!', 60, 35);

  var marker = map.addMarker({
    'position': latLng,
    'title': canvas.toDataURL(),
    'icon': icon
  });

  marker.showInfoWindow();
};

Drag

Simply just set draggable: true.

var marker = map.addMarker({
  'position': GOOGLE,
  'draggable': true
});

marker.addEventListener(plugin.google.maps.event.MARKER_DRAG_END, function(position) {
  marker.setTitle(position.toUrlValue());
  marker.showInfoWindow();
});

Marker Animation

You can specify animation for marker.

Available values:

plugin.google.maps.Animation.DROP (Although the DROP animation bounces in iOS, Android does not bounce.)
plugin.google.maps.Animation.BOUNCE

var marker = map.addMarker({
  position: new plugin.google.maps.LatLng(35, 137),
  icon: "http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png",
  animation: plugin.google.maps.Animation.DROP
});

var button = div.getElementsByTagName('button')[0];
button.addEventListener("click", function() {
  marker.setAnimation(plugin.google.maps.Animation.DROP);
});

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  marker.setAnimation(plugin.google.maps.Animation.BOUNCE);
});

Disable auto pan

You can disable auto panning when the marker is clicked.

// Add a marker
var marker = map.addMarker({
  'position': {
    lat: 20,
    lng: 20
  },
  'animation': plugin.google.maps.Animation.BOUNCE,
  'title': 'The map does not move when you click on this marker.'
});

// Disable marker auto panning.
marker.setDisableAutoPan(true);

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  marker.showInfoWindow();
});

API reference

Create

map.addMarker()	Add a marker.

Methods

getPosition()	Returns the marker position.
showInfoWindow()	Shows the infoWindow of the marker.
hideInfoWindow()	Hides the infoWindow of the marker.
setAnimation()	Specifies a marker animation.
isVisible()	Return true if the marker is visible.
getTitle()	Returns the marker title.
setTitle()	Changes the marker title.
getSnippet()	Returns the marker snippet.
setSnippet()	Changes the marker snippet.
remove()	Remove the marker.
setIconAnchor()	Sets the marker icon anchor.
setInfoWindowAnchor()	Changes the info window anchor.
isInfoWindowShown()	Return true if the infoWindow is shown on the marker.
setOpacity()	Changes the marker opacity.
getOpacity()	Returns the marker opacity.
setZIndex()	Changes the marker zIndex.
setVisible()	Changes the marker visibility.
setDraggable()	Sets true if you allows all users to drag the marker.
isDraggable()	Returns true when the marker is draggable.
setDisableAutoPan()	Sets true if you do not want to move the map when you click on the marker.
setPosition()	Sets the marker position.
setRotation()	Sets the marker rotation angle.
getRotation()	Returns the marker rotation angle.
setFlat()	Sets true if you want to be flat marker.
setIcon()	Changes the marker icon.
getMap()	Return the map reference.

Events

MARKER_CLICK	Arguments: LatLng This event is fired when you click on a marker.
MARKER_DRAG_START	Arguments: LatLng This event is fired when you start dragging with a marker.
MARKER_DRAG	Arguments: LatLng This event is fired during marker dragging.
MARKER_DRAG_END	Arguments: LatLng This event is fired when you drop the marker.
INFO_OPEN	Arguments: LatLng This event is fired when the infoWindow is opened.
INFO_CLICK	Arguments: LatLng This event is fired when you click on the infoWindow.
INFO_LONG_CLICK	Arguments: LatLng This event is fired when you click longer on the infoWindow.
INFO_CLOSE	Arguments: LatLng This event is fired when the infoWindow is closed.

Marker class

Marker class

Contents

Overview

Create a marker

Create multiple marker

Marker class extends BaseClass

Add your data, and hold them

bindTo() method

Icon

SimpleIcon

Color Icon

Base64 Encoded Icon

Drag

Marker Animation

Disable auto pan

API reference

Create

Methods

Events