Skip to content

Latest commit

 

History

History
217 lines (184 loc) · 4.82 KB

README.md

File metadata and controls

217 lines (184 loc) · 4.82 KB
Raw

💚 This is the latest document.

map.addMarker()

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

Add a marker

(from v2.3.0 to current)
var marker = map.addMarker(options)

(from v2.0.0 to current)
map.addMarker(options, callback);

Options

Params Type Details
position ILatLng marker position
icon string | MarkerIcon (optional)The icon image url or properties. Also you can specify HTML Color values. Alternatively you can specify the image as Base64. Please check out the MarkerIcon page.
title string (optional)The content of the infoWindow. If you use HtmlInfoWindow, you can not set this property.
snippet string (optional)The snippet of the infoWindow. If you use HtmlInfoWindow, you can not set this property.
infoWindowAnchor Array<x, y> (optional)Specify the anchor of the InfoWindow in pixels
anchor Array<x, y> (optional)Specify the anchor of icon image in pixels
draggable boolean (optional)Set true if you want to enable to drag the marker. (Default: false) Important! Drag starts after long pressed on the marker.
flat boolean (optional)Set true if you want to use a flat marker. (Default: false)
rotation number (optional)Set rotation angle. (Default: 0)
visible boolean (optional)Set false if you want to hide. (Default: true)
styles {
'text-align': (left, center, right),
'font-style': (normal, italic),
'font-weight': (normal, bold),
'color': (red, #ccffcc, rgb(90, 32 100), etc)
}		 (optional)Specify the options for title. This property work for normal InfoWindow.
animation string (optional)Which animation to play when marker is added to a map.
zIndex number (optional)Higher zIndex value overlays will be drawn on top of lower zIndex value tile layers and overlays.
disableAutoPan boolean (optional)Set to true to disable auto panning when the marker is clicked.

Demo code

<div class="map" id="map_canvas1"></div>
var div = document.getElementById("map_canvas1");
var map = plugin.google.maps.Map.getMap(div);

map.addMarker({
  'position': {
    lat: 0,
    lng: 0
  }
});

Set title & snippet

Marker shows an infoWindow when you tap on the marker. You can also display the snippet strings.

<div class="map" id="map_canvas2"></div>
var div = document.getElementById("map_canvas2");
var map = plugin.google.maps.Map.getMap(div);

map.addMarker({
  'position': {
    lat: 0,
    lng: 0
  },
  title: "Hello Cordova Google Maps\n for iOS and Android",
  snippet: "This plugin is awesome!"
});

// Display the infoWindow
marker.showInfoWindow();

Adding multiple markers

You can create multiple markers with simple code.

<div class="map" id="map_canvas3"></div>
var div = document.getElementById("map_canvas3");
var map = plugin.google.maps.Map.getMap(div);

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(POI.position);
  return map.addMarker(options);
});

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

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

});