Subversion Repositories SmartDukaan

Rev

Rev 27408 | 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

}
.map-icon-label .map-icon {
        font-size: 24px;
        color: #FFFFFF;
        line-height: 48px;
        text-align: center;
        white-space: nowrap;
}
/* 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,
           };
          var infoWindow = new google.maps.InfoWindow();
           
           for (var j = 0; j < locationMap.length; j++) {
                        coordinates.push({lat:locationMap[j].lat, lng:locationMap[j].lng});
                         icons.push({icon: lineSymbol, offset: "50%"});
                        
                var data = locationMap[j];
                  var mapLength = locationMap.length;
                    console.log(mapLength);
                         var marker = new google.maps.Marker({
                  map: map,
                  position: {lat:locationMap[j].lat, lng:locationMap[j].lng},
                   icon: {
                                path: google.maps.SymbolPath.CIRCLE,
                                scale: 6 ,
                                fillColor: '#00CCBB',
                                fillOpacity: 1,
                                strokeColor: '',
                                strokeWeight: 0
                           },
                         
                   });
                   
                   var lastlocationmarker = new google.maps.Marker({
                  map: map,
                  position: {lat:locationMap[mapLength-1].lat, lng:locationMap[mapLength-1].lng}, 
                  animation: google.maps.Animation.DROP,
                   });
        
                (function(marker, data) {
                      google.maps.event.addListener(marker, "mouseover", function(e) {
                        var d = new Date(data.createTime)
                        infoWindow.setContent(d.toLocaleString());
                        infoWindow.open(map, marker);
                  });
                      
               google.maps.event.addListener(marker, "mouseout", function(e) {
                 infoWindow.close();
              });
            })(marker, data);
                                                   
                 }
          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>