Subversion Repositories SmartDukaan

Rev

Rev 27373 | Rev 27405 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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