Google Maps APIを使う案件があったのでメモしたいと思います。
すでにDBでソース上に表示されている「住所」の値から、ジオコーディングでMAPを呼び出す処理を行いました。
使いまわせるように、あとからソース改修をする予定。
Google Maps API サンプルコード
HTML
- HTML上にjQueryとMapのAPIの呼び出し
- map_canvasに地図を表示する部分を配置
- 住所の値が入る部分をjs-addressでclassを追加
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>googleMapsAPI</title>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="mod-canvas">
<div id="map_canvas"></div>
</div>
<span class="js-address">札幌市中央区南13条西1丁目1-8</span>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<!-- Google map Script -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- map script -->
<script src="js/map.js"></script>
</body>
</html>
Script
- address01に.js-addressのクラスからテキスト取得し変数に格納
- 地図を表示する部分を変数に格納
- new google.maps.Geocoder()を変数に格納
- .geocode()のaddressに取得した住所を格納
map.script
var address01 = $(".js-address").text();
var mapDiv01 = document.getElementById('map_canvas');
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address01
}, function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = result[0].geometry.location;
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv01, myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
} else {
alert('取得できませんでした…');
}
});
}
// Map lodding
google.maps.event.addDomListener(window, 'load', initialize);
Github
サンプルコードをgithubにリポジトリを作りました。