google Maps API V3に対応したgmaps.jsを使えば簡単にgoogleマップをカスタマイズできるのでオススメです！
ちょっと前まではAPI Keyが必要だったりと、なかなか導入も面倒だったようですが本当に簡単に出来ちゃいます。
使用制限と購入 – Google Maps JavaScript API v3 — Google Developers
※ただし使用制限もあります
今回行うgoogleマップのカスタマイズは３点！
指定した緯度経度に任意の画像を設置
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option.js"></script>
</head>
<body>
<div id="demo">
<div id="access">
<div id="map"></div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
var map;
map = new GMaps({
div: "#map01",
lat: 35.694140,
lng: 139.689525,
zoom: 15,
});
map.addMarker({
lat: 35.694140,
lng: 139.689525,
title: "てんとう虫",
icon: "img/ladybird.png",
infoWindow: {
content: "<p>てんとう虫 ： 「やほー！」</p>"
}
});
});
jsにmapの緯度と経度、zoomレベルを指定。
マーカーにも同じく緯度と経度を指定し、アイコンの画像指定とオンマウス時のテキスト表示の指定です。
infoWindowはクリック時のテキストになります。
なんて簡単、素敵( ˘ω˘)
指定した2つの緯度経度に任意の画像を設置し、ルート表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option2.js"></script>
</head>
<body>
<div id="demo">
<div class="access">
<div id="map02"></div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
var map;
map = new GMaps({
div: "#map02",
lat: 35.694140,
lng: 139.689525,
zoom: 15,
});
map.drawRoute({
origin: [35.694463, 139.692605],
destination: [35.694140, 139.689525],
travelMode: 'walking',
strokeColor: '#2ecc40',
strokeOpacity: 0.8,
strokeWeight: 4
});
map.addMarker({
lat: 35.694140,
lng: 139.689525,
title: "てんとう虫",
icon: "img/ladybird.png",
infoWindow: {
content: "<p>てんとう虫 ： 「やほー！」</p>"
}
});
map.addMarker({
lat: 35.694463,
lng: 139.692605,
title: "西新宿駅",
infoWindow: {
content: "<p>西新宿駅</p>"
}
});
});
地図の指定、ルートの指定、マーカー2つの指定になります。
これも簡単にカスタマイズできますね( ˘ω˘)
指定した緯度経度に任意の画像を設置して吹き出しを常に表示
これも結構需要ありそうですよね。
→デモはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>gmaps-test01</title>
<link rel="stylesheet" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"></script>')</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/option3.js"></script>
</head>
<body>
<div id="demo">
<div class="access">
<div id="map03"></div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
var map = new google.maps.Map(
document.getElementById("map03"),{
zoom : 15,
center : new google.maps.LatLng(35.694140, 139.689525),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.694140, 139.689525),
icon: "img/ladybird.png",
map: map
});
var infowindow = new google.maps.InfoWindow({
content: "<p>てんとう虫 ： 「やほー！」</p>"
});
infowindow.open(map, marker);
});
デモ用のcss
@charset "utf-8";
/* =================================
@DEMO
================================= */
#demo {
margin: 70px auto;
width: 620px;
}
/* =================================
@ACCESS
================================= */
.access {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
margin-bottom: 30px;
}
/* =================================
@MAP
================================= */
.map {
height: 340px;
}
.map p {
margin: 1px;
white-space:nowrap;
}
おわりに
googleマップのカスタマイズ、結構使う場面も多いのではないでしょうか。
他にもデザインの変更やスマホ用に現在地の取得、ルート検索など様々なマップも作成可能のようなのでサイトに合わせたアクセスマップも簡単に作れそうです。
是非とも導入してみてください( ˘ω˘)
参考にさせていただきました！
ABOUT ME
