JavaScript
mapControl.addMarker Method
Syntax
mapObj.addMarker(name,location,settings);
Arguments
- namestring
The name of the marker that can be used to access it after it has been created.
If the name matches an existing marker, addMarker() will move the existing marker instead of adding a new one.- locationstringarray
The marker location. Specified either as a string containing an address (e.g. "") or an array containing the latitude and longitude values (e.g. [,]).
- settingsobject
A javascript object that contains the settings for the marker. See Creating Settings below.
Description
Adds a marker to a Map Control.
Example
//get a pointer to the map control for variable 'mymap1'
var mapObj = {dialog.object}.getControl('mymap1');
// create a marker
if (mapObj) {
var markerName = 'myMarker1';
var location = '70 Blanchard Road Burlington, MA';
var settings = {
draggable: true,
title: 'Alpha Software',
detail: {
has: true,
data: 'Alpha Software, Inc.<br />70 Blanchard Road<br />Burlington, MA 01803-5100'
},
overlay: {
has: true,
data: '1mi',
fill: {color: 'rgb(255,128,128)'},
stroke: {color: 'rgb(255,128,128)', width: 1}
}
};
mapObj.addMarker(markerName, location, settings);
}The addMarker action is asynchronous. That means that if you have any code that comes after this action, that code will run before this action has completed. If you want code that comes after this action to run after this action has completed, you can specify an onAddComplete event handler in the settings object passed in to the method.
Creating Settings
Below is the full JSON markup for settings - none of these values are required:
{
group: '', // group that the marker is part of - an arbitrary name
icon: {
url: '', // url of the image to use for the marker
width: false, // width of the image
height: false, // height of the image
anchor: {x: false, y: false} // anchor point of the image (this is the point in the image that will be the lat/lng of the marker)
},
title: '', // mouse over help text
detail: {
has: false, // whether or not the marker has a "detail". The "detail" is a popup that provides the user with more information when they click on the marker.
data: '' // the data to display to the user
},
overlay: {
has: false, // whether or not the marker has an "overlay". The "overlay" is a circle drawn on the map under the marker.
value: '1mi', // the value to use for the size of the "overlay". This can be a string with the suffix "m", "km", "mi", or "ft" for radius, and "sq m", "sq km", "sq mi", "sq ft" for area.
fill: {
color: '', // color for the fill
opacity: 1 // opacity of the fill - 0 is transparent and 1 is opaque.
},
stroke: {
color: '', // color for the stroke
width: 1, // width of the stroke (in pixels)
opacity: 1 // opacity of the stroke - 0 is transparent and 1 is opaque.
}
},
draggable: false, // specify if the user can drag the marker on the map
animation: false, // specify the animation for the marker - values can be: false, 'drop', and 'bounce'
emphasize: false, // number of milliseconds to emphasize (bounce) the marker on creation
/*
The 'data' object is passed into all events. You can get the lat/lng of the event location from this object. For example
var lat = data.latLng.lat();
var lng = data.latLnd.lng();
*/
onClick: function(data){}, // function to call when the user clicks on the marker
onDblClick: function(data){}, // function to call when the user double clicks on the marker
onDrag: function(data){}, // function to call when the user is dragging the marker
onDragEnd: function(data){}, // function to call when the user stops dragging the marker
onDragStart: function(data){}, // function to call when the user starts to drag the marker
onMouseDown: function(data){}, // function to call when the user mouses down on the marker
onMouseOut: function(data){}, // function to call when the user mouses out of the marker
onMouseOver: function(data){}, // function to call when the user mouses over the marker
onMouseUp: function(data){}, // function to call when the user mouses up on the marker
onRightClick: function(data){}, // function to call when the user right clicks on the marker
onAddComplete: function(markerSettings,markerObject){} //function to call after the marker has been added to the map. 'this' context in function is the map control
}