Edited at

Google Maps APIのメモ

More than 3 years have passed since last update.

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にリポジトリを作りました。


公式ドキュメント


参考サイト