Last active
December 31, 2015 05:29
-
-
Save hideki-a/7941146 to your computer and use it in GitHub Desktop.
観光コース毎にGoogleマップを表示するもの。JSONには、観光スポットの緯度・経度が含まれている。
This file contains 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
(function ($) { | |
function CourseMap(elem, options) { | |
this.elem = elem; | |
this.map = null; | |
this.markers = []; | |
this.defaults = { | |
zoom: 16, | |
strokeColor: "#cc0000", | |
strokeOpacity: 1.0, | |
strokeWeight: 2 | |
}; | |
this.settings = _.assign(this.defaults, options); | |
} | |
CourseMap.prototype = { | |
getSpotData: function () { | |
var url = "../json/data_" + $(this.elem).data("category") + ".json"; | |
return $.ajax({ | |
url: url, | |
method: "get" | |
}); | |
}, | |
getLatLngFromItem: function (item) { | |
return new google.maps.LatLng( | |
item.customFields[0].value, | |
item.customFields[1].value | |
); | |
}, | |
addMarker: function (coordinates) { | |
_.forEach(coordinates, function (point) { | |
this.markers.push(new google.maps.Marker({ | |
position: point, | |
map: this.map, | |
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(this.markers.length + 65) + ".png" | |
})); | |
}, this); | |
}, | |
drawPolyline: function (coordinates) { | |
var polyline = new google.maps.Polyline({ | |
path: coordinates, | |
geodesic: true, | |
strokeColor: this.settings.strokeColor, | |
strokeOpacity: this.settings.strokeOpacity, | |
strokeWeight: this.settings.strokeWeight | |
}); | |
polyline.setMap(this.map); | |
}, | |
drawMapElement: function (response) { | |
var json = JSON.parse(response); | |
var coordinates = []; | |
_.each(json.items, function (item) { | |
coordinates.push(this.getLatLngFromItem(item)); | |
}, this); | |
this.addMarker(coordinates); | |
this.drawPolyline(coordinates); | |
}, | |
init: function () { | |
var center = new google.maps.LatLng(MapConfig.mapCenter.lat, MapConfig.mapCenter.lng); | |
var mapOptions = { | |
zoom: this.settings.zoom, | |
center: center | |
}; | |
var xhr; | |
this.map = new google.maps.Map(this.elem, mapOptions); | |
xhr = this.getSpotData(); | |
xhr.done(_.bind(this.drawMapElement, this)); | |
} | |
}; | |
var $mapDivs = $("div[id^='map_']"); | |
_($mapDivs).forEach(function (mapDiv) { | |
var courseMap = new CourseMap(mapDiv); | |
courseMap.init(); | |
}); | |
}(jQuery)); |
This file contains 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="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>鞆の浦 - 観光スポット</title> | |
<style> | |
.course__item { | |
margin-bottom: 2em; | |
} | |
.course__excerpt, .course__data { | |
margin: 0 0 0.5em; | |
} | |
.course__route { | |
list-style-type: upper-alpha; | |
} | |
.direction-map { | |
width: 600px; | |
height: 350px; | |
} | |
.direction-map label { | |
display: inline; | |
width: auto; | |
} | |
.direction-map img { | |
max-width: none; | |
max-height: none; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>鞆の浦</h1> | |
<h2>コース例</h2> | |
<ul class="course"> | |
<li class="course__item">鞆の浦必見スポット | |
<p class="course__excerpt">鞆の浦の必見スポットを巡るコース。鞆を存分に楽しみたい方に。</p> | |
<dl class="course__data"> | |
<dt>所要時間</dt> | |
<dd>8時間</dd> | |
</dl> | |
<ol class="course__route"> | |
<li><a href="/tour/2013/12/post-3.html">対潮楼・福禅寺</a></li> | |
<li><a href="/tour/2013/12/post-5.html">いろは丸事件談判跡</a></li> | |
<li><a href="/tour/2013/12/post-6.html">雁木(がんぎ)</a></li> | |
</ol> | |
<div id="map_16" class="direction-map" data-category="tomo_1"></div> | |
</li> | |
<li class="course__item">鞆の浦半日コース | |
<p class="course__excerpt">ある程度時間のある方に。必見スポットを中心に、鞆の魅力をご覧いただきます。</p> | |
<dl class="course__data"> | |
<dt>所要時間</dt> | |
<dd>約4時間</dd> | |
</dl> | |
<ol class="course__route"> | |
<li><a href="/tour/2013/12/post-3.html">対潮楼・福禅寺</a></li> | |
<li><a href="/tour/2013/12/post-4.html">対仙酔楼</a></li> | |
<li><a href="/tour/2013/12/post-6.html">雁木(がんぎ)</a></li> | |
<li><a href="/tour/2013/12/post-5.html">いろは丸事件談判跡</a></li> | |
<li><a href="/tour/2013/12/post-7.html">沼名前神社(ぬなくまじんじゃ)</a></li> | |
</ol> | |
<div id="map_17" class="direction-map" data-category="tomo_2"></div> | |
</li> | |
<li class="course__item">鞆の浦2hコース | |
<p class="course__excerpt">限られた時間で鞆を味わいたい方に。</p> | |
<dl class="course__data"> | |
<dt>所要時間</dt> | |
<dd>2時間</dd> | |
</dl> | |
<ol class="course__route"> | |
<li><a href="/tour/2013/12/post-3.html">対潮楼・福禅寺</a></li> | |
<li><a href="/tour/2013/12/post-8.html">弁天島(車窓)</a></li> | |
<li><a href="/tour/2013/12/post-6.html">雁木(がんぎ)</a></li> | |
<li><a href="/tour/2013/12/post-5.html">いろは丸事件談判跡</a></li> | |
</ol> | |
<div id="map_18" class="direction-map" data-category="tomo_3"></div> | |
</li> | |
</ul> | |
<script> | |
var MapConfig = { | |
mapCenter: { | |
lat: 34.38368, | |
lng: 133.382296 | |
} | |
}; | |
</script> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> | |
<script src="//raw.github.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script> | |
<script src="courseMap.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment