skip to the main content area of this page
Map Pin Demo
This Demo shows how to add markers to a map using client-side Javascript code.





In this example a javascript function is created which adds 3 markers to the displayed map. The function is called from a timer to simulate updating one of the markers periodically

        
function UpdateMapPins()
{
    var map = egis.GetMap(0);
    if (map != null)
    {
        if (pinsAdded == false)
        {
            map.AddMarker({
                markerId: 'pin1',
                imgUrl: 'mappin.png',
                imgWidth: 44,
                imgHeight: 50,
                lat: -37.7765,
                lon: 144.9609 });
             
            map.AddMarker({
                markerId: 'pin2',
                imgUrl: 'mappin.png',
                imgWidth: 44,
                imgHeight: 50,
                lat: -37.7765,
                lon: 144.9220,
                clickHandler: MarkerClicked });
            map.AddMarker({
                markerId: 'pin3',
                imgUrl: 'mappin.png',
                imgWidth: 44,
                imgHeight: 50,
                lat: -37.7334,
                lon: 144.9220 });
            pinsAdded = true;            
        }
        else
        {
            //could obtain a live position from server using Ajax,
            //but we wil just simulate by moving a random amount
            map.Markers[0].lat += Math.random() * 0.001 - 0.0005;
            map.Markers[0].lon += Math.random() * 0.001; map.UpdateMarkers();
        }
   }
}

To add a marker to the map the map.AddMarker function is called with the following parameters:

  • markerId: unique id
  • imgUrl: url of the marker image to be displayed
  • imgWidth: the width of the marker image
  • imgHeight the height of the marker image
  • lat: latitude coordinate of the marker
  • lon: longitude coordinate of the marker
  • clickHandler: optional click handler function
Map Information

The displayed map is a map of Melbourne, Australia. The map data was sourced from the Australian Government GeoScience Australia Website*, and consists of 17 layers, including local roads, railways, reserves, lakes and rivers.



* This Map incorporates Data which is Copyright Commonwealth of Australia 2005. The Data has been used with the permission of the Commonwealth. The Commonwealth has not evaluated the data as altered and incorporated within Easy GIS .NET, and therefore gives no warranty regarding its accuracy, completeness, currency or suitability for any particular purpose.