Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to show multiple pins at same Lat Lng

    @mayank.srivastava
    Recommendations Offline Message

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 514
    Comment on it

    "Adding multiple pins at same LatLng"

    In this article we will see how to add multiple pins at the same Lat Lng in the Google Map.
        While working with Google Maps, I faced a problem that, we are not able to show multiple pins at the same Lat Lng, Only the last pin is visible.
    The solution I got is "oms.min.js" ,by including this Js file in our project we can show multiple pins at same Lat Lng.

    Getting started:

    Step 1: DownLoad "oms.min.js" from the following Link:

    Download oms.min.js

    Step 2: Include the following two files in your code:

    <script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
<script src="js/oms.min.js"></script>

    Step 3: Now write the following Code in your body tag:

    <body onload="initialize();">
    <div id="mapcanvas" style="width: 700px; height: 500px;"></div>
    <input type="button" id="addMarker" value="Add Marker" onclick="AddMarker();"/>
</body>

    Note=> In the above code the div tag with id="mapcanvas" will be used to display the Google Map.The button will be used to add pin to the map.

    Step 4: Now add the following javascript code to your project:

    <script type="text/javascript">

    var gm = google.maps;
    var map;
    var oms;

    function initialize() {

        map = new gm.Map(document.getElementById('mapcanvas'), {
            mapTypeId: gm.MapTypeId.SATELLITE,
            center: new gm.LatLng(50, 0), zoom: 6,
            scrollwheel: false
        });
        var iw = new gm.InfoWindow();
        oms = new OverlappingMarkerSpiderfier(map,
          { markersWontMove: true, markersWontHide: true });
        var usualColor = 'eebb22';
        var spiderfiedColor = 'ffee22';
        var iconWithColor = function (color) {
            return 'http://chart.googleapis.com/chart?chst=d&#95;map&#95;xpin&#95;letter&chld=pin|+|' +
              color + '|000000|ffff00';
        }

        oms.addListener('click', function (marker) {

            iw.setContent(marker.desc);
            iw.open(map, marker);
        });

    }

    function AddMarker() {
        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin1',
            map: map,
        });

        marker.desc = "First Pin";
        oms.addMarker(marker);

        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin2',
            map: map,
        });
        marker.desc = "Second Pin";
        oms.addMarker(marker);

        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin3',
            map: map,
        });
        marker.desc = "Third Pin";
        oms.addMarker(marker);

    }

</script>

    Note=> The above code contains the initialize() and AddMarker() functions that will be called onload of the body and onclick of the addMarker button respectively. From the code you can see I am making three pins at the Lat, Lng = 23.72, 72.100.

    The complete code:

    <html>

<script src="http://maps.google.com/maps/api/js?v=3.9&amp;sensor=false"></script>
<script src="js/oms.min.js"></script>
<script type="text/javascript">

    var gm = google.maps;
    var map;
    var oms;

    function initialize() {

        map = new gm.Map(document.getElementById('mapcanvas'), {
            mapTypeId: gm.MapTypeId.SATELLITE,
            center: new gm.LatLng(50, 0), zoom: 6,
            scrollwheel: false
        });
        var iw = new gm.InfoWindow();
        oms = new OverlappingMarkerSpiderfier(map,
          { markersWontMove: true, markersWontHide: true });
        var usualColor = 'eebb22';
        var spiderfiedColor = 'ffee22';
        var iconWithColor = function (color) {
            return 'http://chart.googleapis.com/chart?chst=d&#95;map&#95;xpin&#95;letter&chld=pin|+|' +
              color + '|000000|ffff00';
        }

        oms.addListener('click', function (marker) {

            iw.setContent(marker.desc);
            iw.open(map, marker);
        });

    }

    function AddMarker() {
        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin1',
            map: map,
        });

        marker.desc = "First Pin";
        oms.addMarker(marker);

        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin2',
            map: map,
        });
        marker.desc = "Second Pin";
        oms.addMarker(marker);

        var marker = new gm.Marker({
            position: new gm.LatLng(23.72, 72.100),
            title: 'Pin3',
            map: map,
        });
        marker.desc = "Third Pin";
        oms.addMarker(marker);

    }

</script>


<body onload="initialize();">
    <div id="mapcanvas" style="width: 700px; height: 500px;"></div>
    <input type="button" id="addMarker" value="Add Marker" onclick="AddMarker();" />
</body>

</html>

    Step 5: Now run the code, you will get the following output:

    alt text

    On click of this pin, all the three pins will appear pointing to same Lat Lng:

    alt text

    Hope it helps..... Happy Coding !

    Multiple pins at same Lat Lng How to show multiple pins at same Lat Lang Multiple pins .net
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: