緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする
Result
マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。
Google map APIも読み込みます。
jQuery
$(function() {
var koukyo = new google.maps.LatLng(35.685175, 139.7528),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 15,
center: koukyo,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").mouseenter(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
curMarker.setMap();
}
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map,
icon: "http://placehold.jp/24/cc9999/ffffff/90x70.png?text=ここ！"
});
first = false;
}
});
$("#locations li:first").trigger("mouseenter");
});
|
css
#map_canvas {
width: 100%;
height: 400px;
width: 400px;
float: left;
position: relative;
z-index: 30 !important;
}
#locations {
list-style: none;
width: 200px;
float: left;
}
#locations li {
padding: 10px;
float: left;
position: relative;
z-index: 20;
}
#locations li:hover,
#locations li.hover {
background: #ffe8b2
}
#locations li:hover h3,
#locations li.hover h3 {
color: red;
float: left;
}
#locations li h3 {
width: 150px;
}
|
html
<div id="page-wrap">
<ul id="locations">
<li data-geo-lat="35.685175" data-geo-long="139.7528">
<h3>皇居</h3>
</li>
<li data-geo-lat="35.789966" data-geo-long="139.821961">
<h3>スカイツリー</h3>
</li>
<li data-geo-lat="35.675888" data-geo-long="139.744858">
<h3>国会議事堂</h3>
</li>
<li data-geo-lat="-16.500413" data-geo-long="-151.74149">
<h3>ボラボラ島</h3>
</li>
</ul>
<div id="map_canvas"></div>
</div>
|
via
Google Maps Slider
