Show multiple marker on MapMyindia Map

Question

Show multiple marker on MapMyindia Map

3.4k Views Asked by Vishal Nagra At 30 November 2014 at 07:29

I am using map my India map.I shows a marker on map according to define Latitude and Longitude.But now i have to show multiple marker on map.I have no idea about that please help me out.I gives you single marker plotting code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script type="text/javascript" src="http://apis.mapmyindia.com/v2.0/mapApi /licKey=4d29cecd1c6f9f97247b82e18b637093&platform=aspx"></script>
<title>MapmyIndia Maps</title>
 </head>
 <body style="font-family:Verdana,Arial,sans-serif; font-size:12px; line-height:1.2em;">
<div id="MapDiv" style="width: 500px; height: 300px;">
</div>

<script type="text/javascript">

var _X = '76.652826';

var _Y = '10.78716';
var pt = new Point(_X, _Y);

    $().ready(function () {
        var map = $("#MapDiv");
        map.MireoMap();
        map.MireoMap("addMarker", HTMLHelper.mapMarker("https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png", 100, 100), pt);

    })

   </script>

  </body>
 </html>

This code for single map plotting.I want to show multiple markers on map.I provides you some urls for reference

http://www.mapmyindia.com/api/

http://maps.mapmyindia.com/

Original Q&A

There are 3 best solutions below

**AudioBubble** · Answer 1 · 2014-11-30T07:59:41.637000

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <script>
        var map_infoBox = new InfoBox({
            content: '@', maxWidth: 0, isHidden: false, pixelOffset: new google.maps.Size(-161, -230),
            zIndex: null, boxClass: 'infobox', closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            , infoBoxClearance: new google.maps.Size(1, 1)
        });


        function initialize() {
            var map_MyOptions = { zoom: 5, center: new google.maps.LatLng(26.216667, 50.583333),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-locator-pin'), map_MyOptions);
            for (var i =1 ; i < 10; i++) {
                var lat = 26.216667 + i;  //add your latitude value
                var long = 50.583333; //add your longtitude value
                var myLatLng = new google.maps.LatLng(lat, long);
                marker = new google.maps.Marker({ position: myLatLng, map: map });
                google.maps.event.addListener(marker, 'click',
                                                        function () {
                                                            map_infoBox.setContent("<h1> Hello Title " + i + "</h1>");
                                                            map_infoBox.open(map, marker);
                                                        });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-locator-pin" style="width: 800px; height: 100%;">
    </div>
</body>
</html>

check this above example

**apisupport_mmi** · Answer 2 · 2018-03-30T18:22:36.987000

<!DOCTYPE html>
<html>
    <head>
        <title>Mapmyindia Maps</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://apis.mapmyindia.com/advancedmaps/v1/<Lic_Key>/map_load?v1.1"></script>
                <style>
                    html, body, #map {  margin: 0;  padding: 0;width: 100%;height: 100%;}
                </style>

    </head>
    <body>
            <div id="map"></div>
        <script>
        /*map initialized*/
        var map=new MapmyIndia.Map("map",{ center:[28.61, 77.23], zoomControl: true, hybrid:true, search:true, location:true}); 

        /*Latitude,Longitude set*/
        var LatLng = [
        ["marker1",28.624076, 77.209860],
        ["marker2",28.607198, 77.196299],
        ["marker3",28.619706, 77.197501],
        ["marker4",28.618049, 77.223422],
        ["marker5",28.627391, 77.222907],
        ["marker6",28.632966, 77.206599],
        ["marker7",28.615035, 77.227370]
        ];

        /*iterate on size of latitiude longitude set*/
        for (var i = 0; i < LatLng.length; i++) {
        new L.marker([LatLng[i][1],LatLng[i][2]])
                .bindPopup(LatLng[i][0])
                .addTo(map);
        }
         </script>
    </body>
</html>

**Jay Prakash** · Answer 3 · 2018-03-30T20:37:53.257000

Your code needs some change to show the map, You are using

<script type="text/javascript" src="http://apis.mapmyindia.com/v2.0/mapApi/licKey=4d29cecd1c6f9f97247b82e18b637093&platform=aspx"></script>

Change above line by

<script src="https://apis.mapmyindia.com/advancedmaps/v1/4d29cecd1c6f9f97247b82e18b637093/map_load?v=0.1">

For Initialise MapMyIndia map. You are using

var map = $("#MapDiv");
map.MireoMap();

Change that code by

var map=new MapmyIndia.Map("MapDiv",{ center:[30.7333, 76.7794], zoomControl: true, hybrid:true, search:true, location:true});

Above single line code able to get MapmyIndia map and will display into your container element.

Now come to the marker plotting code:

var _X = '76.652826';
var _Y = '10.78716';
var pt = new Point(_X, _Y);  
map.MireoMap("addMarker", HTMLHelper.mapMarker("https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png", 100, 100), pt);

Here you are creating Point there is no need to create point for marker plotting because MapmyIndia API able to plot marker using lat lng

Change marker creation code by

     var _X = '76.652826';
     var _Y = '10.78716';
     var markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], // size of the icon
    iconAnchor:   [50, 100] // point of the icon which will correspond to marker's location
});
   new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

And Now your answer how to create multiple marker. There is multiple way to do so,

1)This one is very simple create marker one by one and add to map like

     var _X = '76.652826';
     var _Y = '10.78716';
     var markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], 
    iconAnchor:   [50, 100]});

new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

     _X = '76.602826';
     _Y = '10.70716';
      markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], 
    iconAnchor:   [50, 100]});

new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

2) Or you can run for loop create multiple marker and add to map

var markerLatLngs = [
        [30.7333, 76.7794],
        [30.7233, 76.7694],
        [30.7133, 76.7594]
        ];
var markerIcon = L.icon({
        iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
        iconSize:     [100, 100], 
        iconAnchor:   [50, 100]});
    for (var i = 0; i < markerLatLngs.length; i++) {
          new L.marker([markerLatLngs[i][0], markerLatLngs[i][1]], {icon: markerIcon}).addTo(map);
    }

3) This one is very important if you have large amounts of marker. Create a layer group and add all marker to that group and add that group to map.

     var markerLatLngs = [
            [30.7333, 76.7794],
            [30.7233, 76.7694],
            [30.7133, 76.7594]
            ];
 var markerIcon = L.icon({
                iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
                iconSize:     [100, 100], 
                iconAnchor:   [50, 100]});
        var markerGroup = new L.featureGroup(); //Create  a group for markers
        for (var i = 0; i < markerLatLngs.length; i++) {
         var marker= new L.marker([markerLatLngs[i][0], markerLatLngs[i][1]], {icon: markerIcon});
           markerGroup.addLayer(marker); //add marker into group
        }
    markerGroup.addTo(map); // add Group of markers to map

Show multiple marker on MapMyindia Map

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in DICTIONARY

Related Questions in MAPMYINDIA-API

Trending Questions

Popular # Hahtags

Popular Questions