Created
November 11, 2015 04:28
-
-
Save inakagawa/a79f4a95592fe1365485 to your computer and use it in GitHub Desktop.
google maps マップとマーカー1つを表示する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// http://qiita.com/redamoon/items/d3d4c92b323f1204bf10 | |
// div.js-address の中のテキストを取って、div#map_canvas の中を更新する | |
// todo: 操作するdivの規定, 住所を取り込むdivの規定 | |
// | |
(function(){ // jQueryを使わず手動でonload処理 | |
var address01 = $(".js-address").text(); // 要素内のテキスト取得 (jQuery 使ってるのはここだけなので、手動で取ればjQ不要) | |
var mapDiv01 = document.getElementById('map_canvas'); // elementを取っておいて、あとで google maps ライブラリに渡す(「ここに表示」) | |
function initialize(){ | |
var geocoder = new google.maps.Geocoder(); // Geocoder object | |
geocoder.geocode( | |
{ // set obj | |
address: address01 | |
}, | |
function(results, status){ // 問い合わせして返ってきた状態に基づいて処理する内容をここに書く(callback) | |
if( status == google.maps.GeocoderStatus.OK){ | |
var latlng = results[0].geometry.location; // results配列 にオブジェクトが入るのでobjの中心位置を取る | |
var myOptions = {zoom: 15, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP};//表示オプション(中心位置/タイプ) | |
var map = new google.maps.Map(mapDiv01, myOptions); // 指定したdivの場所に、オプション指定してマップをリクエスト | |
var marker = new google.maps.Marker({position: latlng, map: map}); //作成したmapの上(ここでは中心)に、マーカー配置 | |
}else{ | |
alert('取得できませんでした'); | |
} | |
} | |
); | |
} | |
// load map | |
google.maps.event.addDomListener(window,'load',initialize); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
html前提
概要
一連の処理は、geocoder.geocode のコールバックに書く。