Created
September 7, 2016 15:01
-
-
Save neomadara/45c7c97df104bcb4bcfd9ef5bc3e343e to your computer and use it in GitHub Desktop.
GoogleMapでルート検索のオプションを実験
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDg13xe7Kt-Kwb0K-3ThoyyXkO38hvWt9I&?sensor=TRUE"></script> | |
| </head> | |
| <body> | |
| <div id="map_canvas" style="width:100%;height:100%;float:left;"></div> | |
| <script> | |
| var mapCanvas; | |
| function initialize(){ | |
| var mapDiv = document.getElementById('map_canvas'); | |
| var initPos = new google.maps.LatLng(35.658613, 139.745525); | |
| var mapOptions = { | |
| center: initPos, | |
| zoom: 16, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| mapCanvas = new google.maps.Map(mapDiv, mapOptions); | |
| var requests = [ | |
| { | |
| origin: '東京駅', | |
| destination: initPos, | |
| travelMode: google.maps.DirectionsTravelMode.WALKING | |
| }, | |
| { | |
| origin: '品川駅', | |
| destination: initPos, | |
| travelMode: google.maps.DirectionsTravelMode.WALKING | |
| }, | |
| { | |
| origin: '中野駅', | |
| destination: initPos, | |
| travelMode: google.maps.DirectionsTravelMode.WALKING | |
| } | |
| ]; | |
| var directionsService = new google.maps.DirectionsService(); | |
| requests.forEach(function(request){ | |
| directionsService.route(request, callback_direction); | |
| }); | |
| function callback_direction(result, status){ | |
| var defer = $.Deferred(); | |
| if(status === google.maps.DirectionsStatus.OK){ | |
| var directionsDisplay = new google.maps.DirectionsRenderer({ | |
| map: mapCanvas, | |
| preserveViewport: true, | |
| suppressInfoWindows: true, | |
| polylineOptions: { | |
| strokeWeight: 15, | |
| strokeColor: 'rgba(0, 0, 0, 0.5)', | |
| } | |
| }); | |
| directionsDisplay.setDirections(result); | |
| defer.resolve(); | |
| } | |
| return defer.promise(); | |
| } | |
| function createMarker(opts){ | |
| return new google.maps.Marker(opts); | |
| } | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment