Click here to Skip to main content
15,846,726 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to display multiple markers on Google map.I am using for each loop to iterate over the model list that contains latitude and longitude.But function is called and it does not show a map.

code:

JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
     </script>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? 
      sensor=false"></script>
      <script type="text/javascript">
    $(document).ready(function () {
    alert("working");
    @foreach(var item in Model)
  {

    <text>
    var markerlatLng = new google.maps.LatLng(item.latitude,item.longitude);


  //  var latlng = new google.maps.LatLng(markerlatLng);
    var options = {
        zoom: 14, center: markerlatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById
          ("map_canvas"), options);


    var marker = new google.maps.Marker({
        position: markerlatLng,
        map: map_canvas,
    });
 </text>
   }
   });
  </script> 
Posted

try this.. :)

HTML
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false">
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>


reference.. :)

http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
 
Share this answer
 

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