Subversion Repositories SmartDukaan

Rev

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

<!DOCTYPE html>
<html>
  <head>
    <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%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
<script type="text/javascript">
        let map;

        function initMap() {
          map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 28.644800
, lng: 78.9629 },
            zoom: 8,
          });
          const coordinates = [];
          const icons = [];
          const lineSymbol = {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          };
        #foreach($location in $locations)
        coordinates.push({lat: $location.getLat(), lng: $location.getLng()});
        icons.push({icon: lineSymbol, offset: "50%"});
        #end
          const flightPath = new google.maps.Polyline({
            path: coordinates,
            icons: icons,
            geodesic: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
          flightPath.setMap(map);
                  
        }
</script>
</html>