Subversion Repositories SmartDukaan

Rev

Rev 27408 | 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 
}
27405 tejbeer 12 
.map-icon-label .map-icon {
13 
	font-size: 24px;
14 
	color: #FFFFFF;
15 
	line-height: 48px;
16 
	text-align: center;
17 
	white-space: nowrap;
18 
}
27366 amit.gupta 19 
/* Optional: Makes the sample page fill the window. */
20 
html,
21 
body {
22 
  height: 100%;
23 
  margin: 0;
24 
  padding: 0;
25 
}
26 
</style>
27 
    <!-- jsFiddle will insert css and js -->
27402 tejbeer 28 
 
27366 amit.gupta 29 
  <body>
30 
    <div id="map"></div>
31 
  </body>
27402 tejbeer 32 
 
33 
 
27366 amit.gupta 34 
<script type="text/javascript">
35 
 
27402 tejbeer 36 
console.log($userLocationMap);
37 
	var users = $users;
38 
	var userLocationMap = $userLocationMap;
39 
 
40 
function initMap() {
41 
	var center = { lat: 28.644800, lng: 78.9629 };
42 
	colors =["#CD5C5C","#2980B9","#FF0000"]
43 
 
44 
 
45 
   for (var k = 0; k < users.length; k++) {
46 
      var userId = users[k].id;
47 
	   var locationMap =  userLocationMap[userId.toString()]
48 
 
49 
		   for (var l = 0; l < locationMap.length; l++) {
50 
				center = {lat:locationMap[l].lat, lng:locationMap[l].lng};
51 
				console.log(center)
52 
			 break;
53 
 
54 
			}
55 
	  break;
56 
   }
57 
 
58 
     map = new google.maps.Map(document.getElementById("map"), {
59 
	    center: center,
60 
	    zoom: 12,
27366 amit.gupta 61 
	  });
27402 tejbeer 62 
	  console.log(center)
63 
    for (var i = 0; i < users.length; i++) {
64 
	   var userId = users[i].id;
65 
	   var locationMap =  userLocationMap[userId.toString()]
66 
	   console.log(locationMap)
67 
	   const coordinates = [];
68 
	   const icons = [];
69 
	   const lineSymbol = {
27371 amit.gupta 70 
	    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
27402 tejbeer 71 
	   };
27405 tejbeer 72 
	  var infoWindow = new google.maps.InfoWindow();
27402 tejbeer 73 
 
74 
	   for (var j = 0; j < locationMap.length; j++) {
75 
			coordinates.push({lat:locationMap[j].lat, lng:locationMap[j].lng});
76 
			 icons.push({icon: lineSymbol, offset: "50%"});
27405 tejbeer 77 
 
78 
		var data = locationMap[j];
79 
		  var mapLength = locationMap.length;
80 
		    console.log(mapLength);
81 
			 var marker = new google.maps.Marker({
82 
	          map: map,
83 
	          position: {lat:locationMap[j].lat, lng:locationMap[j].lng},
84 
	           icon: {
85 
				path: google.maps.SymbolPath.CIRCLE,
27408 tejbeer 86 
				scale: 6 ,
27405 tejbeer 87 
				fillColor: '#00CCBB',
88 
				fillOpacity: 1,
89 
				strokeColor: '',
90 
				strokeWeight: 0
91 
			   },
92 
 
93 
		   });
94 
 
95 
		   var lastlocationmarker = new google.maps.Marker({
96 
	          map: map,
97 
	          position: {lat:locationMap[mapLength-1].lat, lng:locationMap[mapLength-1].lng},
27748 tejbeer 98 
	          animation: google.maps.Animation.DROP,
27405 tejbeer 99 
		   });
100 
 
101 
		(function(marker, data) {
102 
		      google.maps.event.addListener(marker, "mouseover", function(e) {
103 
		        var d = new Date(data.createTime)
104 
		        infoWindow.setContent(d.toLocaleString());
105 
		        infoWindow.open(map, marker);
106 
		  });
107 
 
108 
	       google.maps.event.addListener(marker, "mouseout", function(e) {
109 
	         infoWindow.close();
110 
	      });
111 
	    })(marker, data);
112 
 
27402 tejbeer 113 
		 }
27366 amit.gupta 114 
	  const flightPath = new google.maps.Polyline({
115 
	    path: coordinates,
27372 amit.gupta 116 
	    icons: icons,
27366 amit.gupta 117 
	    geodesic: true,
27402 tejbeer 118 
	    strokeColor: colors[i%3],
27366 amit.gupta 119 
	    strokeOpacity: 1.0,
27370 amit.gupta 120 
	    strokeWeight: 2
27366 amit.gupta 121 
	  });
122 
	  flightPath.setMap(map);
27402 tejbeer 123 
 
27405 tejbeer 124 
 
125 
	}
126 
 
27402 tejbeer 127 
}
27366 amit.gupta 128 
</script>
27402 tejbeer 129