Skip to content

Instantly share code, notes, and snippets.

@hideki-a

hideki-a/courseMap.js

Last active December 31, 2015 05:29
Show Gist options
  • Save hideki-a/7941146 to your computer and use it in GitHub Desktop.
Save hideki-a/7941146 to your computer and use it in GitHub Desktop.
Download ZIP
観光コース毎にGoogleマップを表示するもの。JSONには、観光スポットの緯度・経度が含まれている。
Raw
courseMap.js
(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));
Raw
sample.html
<!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&amp;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