💚 This is the latest document.
This class extends BaseClass.
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();
});
}
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();
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 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");
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'
}
});
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();
};
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();
});
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);
});
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();
});
| map.addMarker() | Add a marker. |
|---|
| 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. |
| 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. |