Subversion Repositories SmartDukaan

Rev

Rev 27373 | Rev 27405 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 


<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfPuYFmniE30x275HAAtqz21WkaaGa2bc&callback=initMap&libraries=&v=weekly" defer></script>
<style>
#map {
  height: 100%;
  width:100%;
  position:absolute

}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
    <!-- jsFiddle will insert css and js -->

  <body>
    <div id="map"></div>
  </body>
  
  
<script type="text/javascript">

console.log($userLocationMap);
        var users = $users;
        var userLocationMap = $userLocationMap;
              
function initMap() {
        var center = { lat: 28.644800, lng: 78.9629 };
        colors =["#CD5C5C","#2980B9","#FF0000"]
        
  
   for (var k = 0; k < users.length; k++) {
      var userId = users[k].id;
           var locationMap =  userLocationMap[userId.toString()]
           
                   for (var l = 0; l < locationMap.length; l++) {
                                center = {lat:locationMap[l].lat, lng:locationMap[l].lng};
                                console.log(center)
                         break;
                         
                        }
          break;
   }
   
     map = new google.maps.Map(document.getElementById("map"), {
            center: center,
            zoom: 12,
          });
          console.log(center)
    for (var i = 0; i < users.length; i++) {
           var userId = users[i].id;
           var locationMap =  userLocationMap[userId.toString()]
           console.log(locationMap)
           const coordinates = [];
           const icons = [];
           const lineSymbol = {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
           };
        
           
           for (var j = 0; j < locationMap.length; j++) {
                        coordinates.push({lat:locationMap[j].lat, lng:locationMap[j].lng});
                         icons.push({icon: lineSymbol, offset: "50%"});
                 }
          const flightPath = new google.maps.Polyline({
            path: coordinates,
            icons: icons,
            geodesic: true,
            strokeColor: colors[i%3],
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
          flightPath.setMap(map);
        
        }  
}
</script>