Last active
April 24, 2018 12:11
-
-
Save zubayerahamed/b31808214f4c00b1a7056701a4074a20 to your computer and use it in GitHub Desktop.
Google Map API Test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src = "https://maps.googleapis.com/maps/api/js"></script> | |
| <script type="text/javascript"> | |
| function loadMap() { | |
| var initZoom = 7; | |
| var depot = [23.6238, 90.5000]; | |
| var lat = [23.8103, 22.8456, 24.3636, 22.3569, 24.8949]; | |
| var lng = [90.4125, 89.5403, 88.6241, 91.7832, 91.8687]; | |
| var directionsDisplay = new google.maps.DirectionsRenderer; | |
| var directionsService = new google.maps.DirectionsService; | |
| var mapOptions = { | |
| center: new google.maps.LatLng(lat[0], lng[0]), | |
| zoom: initZoom, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| disableDefaultUI: true, | |
| panControl: true, | |
| zoomControl: true, | |
| zoomControlOptions: { | |
| style: google.maps.ZoomControlStyle.SMALL, | |
| position: google.maps.ControlPosition.RIGHT_BOTTOM | |
| }, | |
| scaleControl: true, | |
| mapTypeControl: true, | |
| streetViewControl: true, | |
| overviewMapControl: true, | |
| rotateControl: true, | |
| mapTypeControlOptions: { | |
| style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, | |
| position: google.maps.ControlPosition.TOP_CENTER, | |
| mapTypeIds: [ | |
| google.maps.MapTypeId.ROADMAP, | |
| google.maps.MapTypeId.TERRAIN | |
| ] | |
| } | |
| }; | |
| var map = new google.maps.Map(document.getElementById("sample"), mapOptions); | |
| var markers = []; | |
| for (i = 0; i < 5; i++) { | |
| var string; | |
| var infowindow = new google.maps.InfoWindow(); | |
| var marker = new google.maps.Marker({ | |
| position: new google.maps.LatLng(lat[i], lng[i]), | |
| map: map, | |
| animation: google.maps.Animation.DROP | |
| //draggable: true, | |
| //icon: 'marker1.png' | |
| }); | |
| string = "<p>Zubayer Ahamed</p>"; | |
| var origin = {lat: lat[i], lng: lng[i]}; | |
| var depo = {lat: depot[0], lng: depot[1]}; | |
| var service = new google.maps.DistanceMatrixService; | |
| service.getDistanceMatrix({ | |
| origins: [origin], | |
| destinations: [depo], | |
| travelMode: 'DRIVING', | |
| unitSystem: google.maps.UnitSystem.METRIC, | |
| avoidHighways: false, | |
| avoidTolls: false | |
| }, function (response, status) { | |
| if (status !== 'OK') { | |
| alert('Error was: ' + status); | |
| } else { | |
| var distance = response.rows[0].elements[0].distance; | |
| var duration = response.rows[0].elements[0].duration; | |
| string += "<p>Distance: " + distance.text; | |
| string += "<p>duration: " + duration.text; | |
| //console.log(string); | |
| } | |
| }); | |
| infowindow.setContent(string); | |
| google.maps.event.addListener(marker, 'click', function () { | |
| infowindow.open(map, this); | |
| }); | |
| }; | |
| markers.push(marker); | |
| directionsDisplay.setMap(map); | |
| directionsService.route({ | |
| origin: {lat: lat[0], lng: lng[0]}, | |
| destination: {lat: lat[1], lng: lng[1]}, | |
| travelMode: google.maps.TravelMode.DRIVING | |
| }, function(response, status) { | |
| if (status === google.maps.DirectionsStatus.OK) { | |
| directionsDisplay.setDirections(response); | |
| } else { | |
| window.alert('Directions request failed due to ' + status); | |
| } | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="loadMap()"> | |
| <div id = "sample" style = "width:100%; height:600px;"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment