Marker

Masashi Katsumata edited this page Sep 27, 2016 · 72 revisions

Join the official community

New versions will be announced through the official community. Stay tune!

Do you have a question or feature request?

Feel free to ask me on the issues tracker.

Or on the official community is also welcome!

Jump to...

Clone this wiki locally

Add a Marker

The map.addMarker() method takes a single Marker options object literal, specifying the initial properties of the marker.

The following fields are particularly important and commonly set when constructing a marker:

Field Name Type Description
icon Object The icon image url or properties. Also you can specify HTML Color values. Alternatively you can specify the image as Base64
title String The content of the infoWindow.
snippet String The snippet of the infoWindow.
position LatLng The position of the marker.
infoWindowAnchor [x, y] Specify the anchor of the InfoWindow
draggable Boolean Set true if you want to enable to drag the marker. (Default: false) Important! Drag starts after long pressed on the marker.
flat Boolean Set true if you want to use a flat marker. (Default: false)
rotation Number Set rotation angle. (Default: 0)
visible Boolean Set false if you want to hide. (Default: true)
styles Object Specify the options for title. See the description.
animation String Which animation to play when marker is added to a map.
zIndex int iOS only, Plugin Version >= 1.3.3 Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays. (You're able to run this on Android, but it will have no effect)
document.addEventListener("deviceready", function() {
  var mapDiv = document.getElementById("map_canvas");

  const GOOGLE = new plugin.google.maps.LatLng(37.422476,-122.08425);
  var map = plugin.google.maps.Map.getMap(mapDiv, {
    'camera': {
      'latLng': GOOGLE,
      'zoom': 17
    }
  });

  map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

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

      marker.showInfoWindow();

    });

  });
});

img

Show/hide InfoWindow

Typically, an infoWindow is shown when you click a marker. To show the infoWindow of the marker programmatically, call the marker.showInfoWindow() method. You can also hide the infoWindow with the marker.hideInfoWindow() method.

marker.showInfoWindow();
marker.hideInfoWindow();

Add a marker with multiple line

The Phonegap-GoogleMaps-Plugin accepts the strings which include multiple line.

map.addMarker({
  'position': new plugin.google.maps.LatLng(0, 0),
  'title': ["Hello Google Map for", "Cordova!"].join("\n"),
  'snippet': "This plugin is awesome!"
}, function(marker) {
  marker.showInfoWindow();
});

img

Add your data, and hold them

You can set your data with other options, such as marker name. Because Marker class inherit BaseClass. BaseClass has set() and get() methods, thus, Marker also has set() and get()

const GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
map.addMarker({
  'position': GOOGLE,
  'myMsg': 'Hello'
}, function(marker) {
  alert(marker.get("myMsg"));
});

callback

The map.addMarker() method takes a callback function as the second argument. The callback function is involved when the marker is created on the map. You can get the instance of the marker from the argument of the callback function.

map.addMarker({
  'position': STATUE_OF_LIBERTY,
  'title': "Statue of Liberty"
}, function(marker) {
  marker.showInfoWindow();
});

img

Create multiple markers

Do you understand why the below code crashes?

//
//  This is BAD example.
//  Don't use this code in your app!!
//
var data = [
  {'title': 'marker1', 'position': new plugin.google.maps.LatLng(xxx, xxx)},
  {'title': 'marker2', 'position': new plugin.google.maps.LatLng(xxx, xxx)},
   ...
  {'title': 'markerN', 'position': new plugin.google.maps.LatLng(xxx, xxx)}
];

var markers = [];
for (var i = 0; i < data.length; i++) {
  map.addMarker(data[i], function(marker) {
    markers.push(marker);
  });
}

markers[data.length - 1].showInfoWindow(); // <-- Error

Because this plugin has two sides: JavaScript side and Native side. When you executes map.addMarker(), the plugin executes the native code asynchronize.

img

It means the JavaScript engine goes ahead before receiving the result. img

The correct way is that wait all results.

addMarkers(data, function(markers) {
  markers[markers.length - 1].showInfoWindow();
});

function addMarkers(data, callback) {
  var markers = [];
  function onMarkerAdded(marker) {
    markers.push(marker);
    if (markers.length === data.length) {
      callback(markers);
    }
  }
  data.forEach(function(markerOptions) {
    map.addMarker(markerOptions, onMarkerAdded);
  });
}

Simple Icon

In the most basic case, an icon can simply indicate an image to use instead of the default Google Maps pushpin icon. To specify such an icon, set the marker's icon property to the URL of an image. The Google Maps API will size the icon automatically. You can use one of the following protocol: https, file, cdvfile and the file absolute path. (Android also accepts file:///android_asset/)

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

img img

Scaled Icon

You may want to specify scale of the icon to emphasize the marker. You can specify the scale size to the marker's icon property using object literals. The icon object literal supports only "url" and "size" properties currently.

Although this plugin provides the size option, I recommend you should resize your icon image before loading. It is effect to reduce the memory usage, and improve your application performance.

var iconSize = {
  width: 92,
  height: 148
};
map.addMarker({
  'position': latLng,
  'icon': {
     url: 'images/icon-yellow.png'
  }
}, function(marker) {
  $("#iconPercent").off();
  $("#iconPercent").change(function() {
    var scale = $(this).val();
    marker.setIcon({
      'url': 'images/icon-yellow.png',
      'size': {
        width: Math.round(iconSize.width * scale),
        height: Math.round(iconSize.height * scale)
      }
    });
  });

});

img

Color Icon

As of v1.2.5, 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)

map.addMarker({
  position: new plugin.google.maps.LatLng(0, 0),
  icon: 'blue',
  'title': "Hello World!\nThis plugin is very awesome!",
  'snippet': "Tap here!"
}, function( marker ) {
  marker.showInfoWindow();
});

Max-width for InfoWindow

As of v.1.2.9, you can specify maxWidth for InfoWindow (submit styles object to marker) This can be percentage (%) or just a numeric value from 0.0 to 1.0 for percentile representation, or the numeric width in pixels.

map.addMarker (
    {
        "position": position,

        "title": "This is the title.",
        "snippet": "And the description of this marker.",

        "styles": {
            "maxWidth": "80%" // This can be percentage (%) or just a numeric value from 0.0 to 1.0 for percentile representation, or the numeric width in pixels.
        }
    },

Marker Animation

As of v1.2.5, 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
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
}, function(marker) {

  var button = document.getElementById("button");
  button.addEventListener("click", function() {
    marker.setAnimation(plugin.google.maps.Animation.BOUNCE);
  });
});

animation_marker

Text Styling

The infoWindow displays the text with left-align by default both on Android and iOS. However, you can change the style using some options:

  • text-align = left, center, right
  • font-style = normal , italic
  • font-weight = normal , bold
  • color = red, #ccffcc, rgb(90, 32 100), etc

The text-align property effects to the snippet as well as the title.

map.addMarker({
  'position': latLng,
  'title': "You can change the text-align specifying by the 'text-align' property.\n" + 
           "This text is where you will see the result of the selected text-align property.",

  'snippet': 'The text-align property also effects to the snippet.',
  'styles' : {
    'text-align': 'center',
    'font-style': 'italic',
    'font-weight': 'bold',
    'color': 'red'
  }
}, function(marker) {
  marker.showInfoWindow();
});

img

Base64 Encoded Icon

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);

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

img

Remove the marker

To remove a marker from the map, call the remove() method.

marker.remove();

Events

Available events for Marker class are the below:

  • MARKER_CLICK
  • INFO_CLICK
  • MARKER_DRAG
  • MARKER_DRAG_START
  • MARKER_DRAG_END

Click a marker

When you click a marker, a MARKER_CLICK event will be propagated to the marker.

const GOOGLE_SYDNEY = new plugin.google.maps.LatLng(-33.867487,151.20699);
map.addMarker({
  'position': GOOGLE_SYDNEY
}, function(marker) {

  marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
    alert("Marker is clicked");
  });
});

Alternatively you can also specify the click event handler to the map.addMarker()'s markerClick option. This is useful when you want to run just small code.

map.addMarker({
  'position': GOOGLE_SYDNEY,
  'markerClick': function(marker) {
    marker.showInfoWindow();
  }
});

Click an infoWindow

When you click a marker, an INFO_CLICK event will be propagated to the marker.

const GOOGLE_SYDNEY = new plugin.google.maps.LatLng(-33.867487,151.20699);
map.addMarker({
  'position': GOOGLE_SYDNEY
}, function(marker) {
  marker.showInfoWindow();

  marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {
    alert("InfoWindow is clicked");
  });
});

Alternatively you can also specify the click event handler to the map.addMarker()'s infoClick option. This is useful when you want to run just small code.

map.addMarker({
  'position': GOOGLE_SYDNEY,
  'title': "Google Sydney",
  'snippet': "click, then remove",
  'markerClick': function(marker) {
    marker.showInfoWindow();
  },
  'infoClick': function(marker) {
    marker.remove();
  }
});

img

Create a marker draggable

To allow users to drag a marker to a different location on the map, set draggable to true in the marker options. Important! Drag starts after long pressed on the marker.

const GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
map.addMarker({
  'position': GOOGLE,
  'draggable': true
});

Or you can enable with marker.setDraggable(true/false);

map.addMarker({
  'position': GOOGLE
}, function(marker) {
  marker.setDraggable(true);
});

img

Drag Events

The phonegap-googlemaps-plugin fires MARKER_DRAG_START, MARKER_DRAG and MARGER_DRAG_END events when the marker starts drag, during dragging, and ends drag.

map.addMarker({
  'position': GOOGLE,
  'draggable': true
}, function(marker) {

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

img

Create a flat marker

The flat option of map.addMarker() indicates whether this marker should be flat against the map true or a billboard facing the camera false. If the marker is flat against the map, it will remain stuck to the map as the camera rotates and tilts but will still remain the same size as the camera zooms, unlike a GroundOverlay. If the marker is a billboard, it will always be drawn facing the camera and will rotate and tilt with the camera. The default value is false.

const GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
map.addMarker({
  'position': GOOGLE,
  'flat': true
});

img

Disable auto pan

You can disable auto panning when the marker is clicked.

marker.addMarker({
  disableAutoPan: true
});


Marker Class Reference

Method Return value Description
getPosition(callback) void Involve the callback function with the marker location.
isVisible() Boolean Return true if the marker is visible
setVisible(Boolean) void Set false if you want to hide the marker.
getHashCode() String Return the marker hash code.
remove() void Remove the marker completely.
setOpacity(alpha) void Change the marker opacity.
getOpacity() Number Return the marker opacity.
setZIndex() int iOS only, Plugin Version >= 1.3.3 Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays. (You're able to run this on Android, but it will have no effect)
setIconAnchor(x, y) void Change the info window anchor. This defaults to 50% from the left of the image and at the bottom of the image.
setInfoWindowAnchor(x, y) void Change the info window anchor. This defaults to 50% from the left of the image and at the top of the image.
setDraggable(Boolean) void Set true if you allows all users to drag the marker.
isDraggable() Boolean Return true if the marker drag is enabled.
setFlat(Boolean) void Set true if you want to be flat marker.
setIcon(Object) void Change icon url and/or size (See the example).
setTitle(String) void Change title of the infoWindow.
getTitle() String Return the title strings.
setSnippet(String) void Change snippet of the infoWindow.
getSnippet() String Return the snippet strings.
setRotation(Number) void Set the marker rotation angle.
getRotation() Number Return the marker rotation angle.
showInfoWindow() Number Show the infoWindow of the marker.
hideInfoWindow() Number Hide the infoWindow of the marker.
setPosition(LatLng) void Set the marker position.
getPosition(callback) Number Return the marker position.
getMap() Map Return the map instance.
setAnimation(String) void Specify the animation either plugin.google.maps.Animation.DROP or plugin.google.maps.Animation.BOUNCE.