1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <title>ポリラインで描画する</title>
  7. <link rel="stylesheet" href="css/style.css">
  8. <script src="http://maps.googleapis.com/maps/api/js"></script>
  9. <script src="js/sample-6.js"></script>
  10. </head>
  11. <body>
  12. <div id="map_canvas"></div>
  13. </body>
  14. </html>
  1. /*
  2. * style.css
  3. */
  4. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  5. html, body, #map_canvas { width: 100%; height: 100%; }
  1. /*
  2. * sample-6.js
  3. * ポリラインで描画する
  4. */
  5. function initialize() {
  6. var canter = new google.maps.LatLng(35.699,139.788);
  7. var mapOptions = {
  8. zoom: 14,
  9. center: canter,
  10. mapTypeId: google.maps.MapTypeId.ROADMAP
  11. };
  12. var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  13. var station = new google.maps.LatLng(35.68140, 139.76607);
  14. var marker = new google.maps.Marker({
  15. position: station,
  16. map: map,
  17. title: '東京駅'
  18. });
  19. var skytree = new google.maps.LatLng(35.70964, 139.81074);
  20. var image = 'img/ico_lopan.png';
  21. var lopanMarker = new google.maps.Marker({
  22. position: skytree,
  23. map: map,
  24. icon: image,
  25. title: 'Lopan cafe'
  26. });
  27. var route = [
  28. station,
  29. new google.maps.LatLng(35.68171, 139.76538),
  30. new google.maps.LatLng(35.68215, 139.76581),
  31. new google.maps.LatLng(35.68250, 139.76574),
  32. new google.maps.LatLng(35.68304, 139.76697),
  33. new google.maps.LatLng(35.68438, 139.76763),
  34. new google.maps.LatLng(35.68365, 139.77072),
  35. new google.maps.LatLng(35.68260, 139.77364),
  36. new google.maps.LatLng(35.68438, 139.77467),
  37. new google.maps.LatLng(35.68860, 139.77295),
  38. new google.maps.LatLng(35.68999, 139.77712),
  39. new google.maps.LatLng(35.69219, 139.78098),
  40. new google.maps.LatLng(35.69546, 139.78518),
  41. new google.maps.LatLng(35.69937, 139.78754),
  42. new google.maps.LatLng(35.70191, 139.78939),
  43. new google.maps.LatLng(35.70606, 139.79424),
  44. new google.maps.LatLng(35.70888, 139.79613),
  45. new google.maps.LatLng(35.70982, 139.79716),
  46. new google.maps.LatLng(35.71083, 139.79767),
  47. new google.maps.LatLng(35.71306, 139.79982),
  48. new google.maps.LatLng(35.71512, 139.80179),
  49. new google.maps.LatLng(35.71292, 139.80548),
  50. new google.maps.LatLng(35.71149, 139.80844),
  51. new google.maps.LatLng(35.70974, 139.80853),
  52. new google.maps.LatLng(35.70953, 139.80934),
  53. skytree,
  54. ];
  55. var polyOptions = {
  56. path: route,
  57. strokeColor: "#0000ff",
  58. strokeOpacity: 0.5,
  59. strokeWeight: 5
  60. }
  61. var poly = new google.maps.Polyline(polyOptions);
  62. poly.setMap(map);
  63. }
  64. google.maps.event.addDomListener(window, 'load', initialize);