Skip to main content

Marker

Markers are effortless way of pointing to a location, so getting right to it, you can go ahead and add markers that we provide out of the box but just in case you want to add your own, we’ve got that covered for you as well. There are 3 main categories of markers that you can add namely,

  • Stock Markers: The one you get out of the box using our Interactive Vector Maps SDK and you can select from a lot of choices.
  • Custom Marker: Just in case you want to provide your own markers, we’ve handled that for you as well.
  • HTML Marker: In case you don’t want to add in an image you can use HTML to create a marker and then plot it on the map as well.

Add Markers​

var marker = new mappls.Marker({
    map: map,
    position: {"lat": 28.519467,"lng":77.223150}
    });

Detailed Code:​

    marker = new mappls.Marker({
            map: object,
            id: id(optional),
            class: class(optional),
            position: {"lat": "28.519467","lng":"77.223150"},
            fitbounds: true, // or false
            fitboundOptions: {padding: 120,duration:1000}, /*if fitbound true*/
            icon: icon(url),
            offset: [0,10],
            width: 35,
            height: 20,
            html: <div style="white-space:nowrap;font-size:10px;padding l                   eft:15px;color:#fff">Hello World</div>,
            popupOptions: true, //or false 
            popupHtml: 'Mapmyindia',
            draggable: true, //or false
            clustersOptions: {"color": "blue","bgcolor":"red"},
        })

Multiple Marker With cluster​

Live Demo | JS Fiddle

    var geoData={
                "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                "properties": {"htmlPopup":"noida"},
                "geometry": {"type": "Point",
                "coordinates": [28.544,77.5454]}
                },{
                "type": "Feature",
                "properties": {"htmlPopup":"faridabad"},
                "geometry": {"type": "Point",
                "coordinates": [28.27189158,77.2158203125]}
                },{
                "type": "Feature",
                "properties": {"htmlPopup":"delhi"},
                "geometry": {"type": "Point",
                "coordinates": [28.549511,77.2678250]}
                }]
            };
    var marker=Mappls.Marker({map:map,position:geoData,icon_url:'https://apis.mapmyindia.com/map_v3/1.png',clusters:true,fitbounds:true,fitboundOptions:{padding: 120,duration:1000},popupOptions:{offset: {'bottom': [0, -20]}}});

GeoJSON bulk Markers​

Live Demo

    var geoData={
                "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                "properties":
                    {
                        "description":"noida",
                        "icon":"https://apis.mapmyindia.com/map_v3/1.png",
                        "icon-size":.75,
                        "icon-offset":[0,-10],
                        "text":"1",
                        "text-size":10,
                        "text-offset":[0,.6]
                },
                "geometry": {"type": "Point",
                "coordinates": [28.544,77.5454]}
                },{
                "type": "Feature",
                "properties": {"description":"faridabad","icon":"https://apis.mapmyindia.com/map_v3/1.png"},
                "geometry": {"type": "Point",
                "coordinates": [28.27189158,77.2158203125]}
                },{
                "type": "Feature",
                "properties": {"description":"delhi","icon":"https://apis.mapmyindia.com/map_v3/1.png"},
                "geometry": {"type": "Point",
                "coordinates": [28.549511,77.2678250]}
                }]
            };
    var marker=mappls.addGeoJson({map:map,data:geoData,fitbounds:true,cType:0});

Remove Markers​

mappls.remove()

    mappls.remove({map: map_object, layer: marker_object});

Sample Codes​