Click here to Skip to main content
15,040,212 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
respected sir,

I am displaying the employee details in the Google map pin click(They are in different locations).

But only one employee is showing the pin click when many are in same location.
My case all the data I am getting in Marker.
But form each country only the last employee is displaying.
I am displaying data in a table .The code I give below.
Please help me to solve this



XML
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
         {
            "CityName": '<%# Eval("CityName") %>',
            "lat": '<%# Eval("Latitude") %>',
            "lng": '<%# Eval("Longitude") %>',
            "email": '<%# Eval("email") %>',
            "EmpName": '<%# Eval("EmpName") %>',
            "CurrentContactNumber": '<%# Eval("CurrentContactNumber") %>'
        }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
];
    </script>

    <script type="text/javascript">

        window.onload = function() {
        debugger;
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var image = 'http://192.168.1.68/toshiba/Images/Male.png';
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    icon: image,
                    title: data.title
                });
                (function(marker, data) {
                    google.maps.event.addListener(marker, "click", function(e) {

                        infoWindow.setContent("<table style='width:400px;'><tr><td>" + "<h3>Name</h3>" + "</td><td>" + "<h3>Email</h3>" + "</td><td>" + "<h3>Contact Number</h3>" + "</td><td>" + "<h3>City</h3>" + "</td></tr><tr><td>" + data.EmpName + "</td><td>" + data.email + "</td><td>" + data.CurrentContactNumber + "</td><td>" + data.CityName + "</td></tr></table>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>




Thank you
Posted
Updated 10-Aug-14 23:02pm
v4
Comments
Moykn 11-Aug-14 10:12am
   
If they are in the same position, you should add just one marker and show the information of all of them in just one infowindow. Or, you could create a list aside of the map and play with marker's z-index. You are seeing just the last info because you are stacking markers one above another.
gggustafson 11-Aug-14 15:29pm
   
+5

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900