Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
27402 tejbeer 1 
 
2 
<title>Simple Map</title>
3 
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
4 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfPuYFmniE30x275HAAtqz21WkaaGa2bc&callback=initMap&libraries=&v=weekly" defer></script>
27366 amit.gupta 5 
<style>
6 
#map {
7 
  height: 100%;
27402 tejbeer 8 
  width:100%;
9 
  position:absolute
10 
 
27366 amit.gupta 11 
}
12 
 
13 
/* Optional: Makes the sample page fill the window. */
14 
html,
15 
body {
16 
  height: 100%;
17 
  margin: 0;
18 
  padding: 0;
19 
}
20 
</style>
21 
    <!-- jsFiddle will insert css and js -->
27402 tejbeer 22 
 
27366 amit.gupta 23 
  <body>
24 
    <div id="map"></div>
25 
  </body>
27402 tejbeer 26 
 
27 
 
27366 amit.gupta 28 
<script type="text/javascript">
29 
 
27402 tejbeer 30 
console.log($userLocationMap);
31 
	var users = $users;
32 
	var userLocationMap = $userLocationMap;
33 
 
34 
function initMap() {
35 
	var center = { lat: 28.644800, lng: 78.9629 };
36 
	colors =["#CD5C5C","#2980B9","#FF0000"]
37 
 
38 
 
39 
   for (var k = 0; k < users.length; k++) {
40 
      var userId = users[k].id;
41 
	   var locationMap =  userLocationMap[userId.toString()]
42 
 
43 
		   for (var l = 0; l < locationMap.length; l++) {
44 
				center = {lat:locationMap[l].lat, lng:locationMap[l].lng};
45 
				console.log(center)
46 
			 break;
47 
 
48 
			}
49 
	  break;
50 
   }
51 
 
52 
     map = new google.maps.Map(document.getElementById("map"), {
53 
	    center: center,
54 
	    zoom: 12,
27366 amit.gupta 55 
	  });
27402 tejbeer 56 
	  console.log(center)
57 
    for (var i = 0; i < users.length; i++) {
58 
	   var userId = users[i].id;
59 
	   var locationMap =  userLocationMap[userId.toString()]
60 
	   console.log(locationMap)
61 
	   const coordinates = [];
62 
	   const icons = [];
63 
	   const lineSymbol = {
27371 amit.gupta 64 
	    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
27402 tejbeer 65 
	   };
66 
 
67 
 
68 
	   for (var j = 0; j < locationMap.length; j++) {
69 
			coordinates.push({lat:locationMap[j].lat, lng:locationMap[j].lng});
70 
			 icons.push({icon: lineSymbol, offset: "50%"});
71 
		 }
27366 amit.gupta 72 
	  const flightPath = new google.maps.Polyline({
73 
	    path: coordinates,
27372 amit.gupta 74 
	    icons: icons,
27366 amit.gupta 75 
	    geodesic: true,
27402 tejbeer 76 
	    strokeColor: colors[i%3],
27366 amit.gupta 77 
	    strokeOpacity: 1.0,
27370 amit.gupta 78 
	    strokeWeight: 2
27366 amit.gupta 79 
	  });
80 
	  flightPath.setMap(map);
27402 tejbeer 81 
 
82 
	}
83 
}
27366 amit.gupta 84 
</script>
27402 tejbeer 85