google maps マップとマーカー1つを表示する

usemap.js

// 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);
})();

html前提

• div.js-addressに住所を格納
• div#map_canvas に地図を表示する

概要

• 1. geocode で住所から 緯度経度(latlng)を取得
• 2. latlngを使って、その位置のマップとマーカーを表示する

一連の処理は、geocoder.geocode のコールバックに書く。

• f(results,status){}
• results[0] に、geocodeの結果(latlng)を含むオブジェクトが入っているので……
• それを使って、オプションを指定してマップ表示
• マップオブジェクトを指定してマーカー表示