2013年5月中旬に終了するらしいGoogleMapsApiV2をV3に移行してみた。

今頃ですが、GooglMapApiをV2からV3に移行してみました。
「ヘッダーの読み込み部分を変更すればいいんじゃね？」ぐらいに考えていたのですが、これがどうして、メソッドとか全然違うじゃないですか。V3移行はちょっと大変でした。

■ヘッダー
PC用だと、「sensor=false」を指定

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

「sensor=true」だと位置情報を取得するらしいので、スマホ用でしょうか。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

■メソッドとか

GMap2()                 →  google.maps.Map()
GMarker()               →  google.maps.Marker()
GLatLng()               →  google.maps.LatLng()
GIcon()                 →  google.maps.MarkerImage()
GMarker.getLatLng()     →  Marker.getPosition()
GEvent.addListener()    →  google.maps.event.addListener()
GEvent.trigger()        →  google.maps.event.trigger()
Gmapload()              →  google.maps.event.addDomListener(window, 'load', initialize)
openInfoWindowHtml()    →  google.maps.InfoWindow()
GPolyLine()             →  google.maps.Polyline()
getBoundsLatLng()       →  get.bounds()
GeocoderClient.getLocations()  →  Geocoder.geocode()
clearOverlays()         →  廃止
addOverlay              →  廃止
map.setCenter(中心座標,ズーム)  →  map.setCenter(中心座標)とmap.setZoom(ズーム)に分ける

この辺が変わっているところなので、V2のJSから上記をリネームしたり、コメントアウトしたりして動かして見ましたが、ポリライン、マーカー、吹き出しが出ません。
変わっているっぽい。

■ポリライン（抜粋）

var polyline = new google.maps.Polyline({
										path: point,
										strokeColor: "#3399FF",
										strokeOpacity: 1.0,
										strokeWeight: 5
});
polyline.setMap(this.map);
polylinesArray.push(polyline);

■マーカー（抜粋）

var image = {
					url: 'http://・マーカーのURL',
					size: new google.maps.Size(32, 39),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(10, -3)
};
var shadow = {
					url: 'http://・マーカーのシャドーのURL',
					size: new google.maps.Size(50, 44),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(10, -3)
};
var marker = new google.maps.Marker({
					position: point,
					map: this.map,
					shadow: shadow,
					icon: image,
					title: ''
});
markersArray.push(marker);

オリジナルマーカーを表示しているので、マーカーとシャドーのURLの指定とサイズ、位置を指定。
V2の時は「clearOverlays()」でマーカーやポリラインが一括で消えたのですが、V3は個別に対応する必要がある。
なので、「polylinesArray」「markersArray」の配列を作って管理する。
消す時は

function clearOverlays() {
	if (markersArray) {
		for (i in markersArray) {
			markersArray[i].setMap(null);
		}
	}
	if (polylinesArray) {
		for (i in polylinesArray) {
			polylinesArray[i].setMap(null);
		}
	}
}

こんな感じで対応する。

■インフォウインドウ（吹き出し）（抜粋）

var infowindow = new google.maps.InfoWindow({
			content: '<div id="infowin">'+
				'<h3>ここにタイトルを入れる</h3>'+
				'<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>'+
				'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
						infowindow.open(map,marker);
});

基本、これで表示されるんだけど、WinのクロームとMacのFFでは縦に長い、もしくはCSSで固定サイズにするとスクロールバーがでるんだけど、これが2本とか３本とかになる。
クロームだとこんな感じ。
atm

マップ側で表示内容を判断して大きければ自動でスクロールバーがでるらしいが、止める方法がないみたい。
上のソースで「infowin」に対してmarginを入れると消えるという情報もあるけど、消えなかった。
いろいろ試したけど、どれもうまくいかないので、「infobox.js」を使ってみた。
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

ヘッダー

<script type="text/javascript" src="infobox.js"></script>

（抜粋）

var myOptions = {
				content: msg,
				disableAutoPan: false,
				maxWidth: 0,
				pixelOffset: new google.maps.Size(-155, -250),
				zIndex: null,
				boxStyle: {
						background: "url(images/infoback.png) no-repeat",
						padding: "5px",
						opacity: 1,
						width: "310px",
						height: "240px",
				},
				closeBoxMargin: "2px 10px 2px 2px",
				closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
				infoBoxClearance: new google.maps.Size(1, 1),
				isHidden: false,
				pane: "floatPane",
				enableEventPropagation: false
};

var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function() {
								if (currentInfoWindow) { currentInfoWindow.close(); }
								ib.open(this.map, marker);
								currentInfoWindow = ib;
});

これだとカスタマイズできるので、スクロールバーの表示・非表示が可能。背景画像を指定してオリジナルにできる。
また、吹き出しの表示位置（上、横とか）も変更できる。

吹き出しは自動で閉じないので、マーカーをいくつもクリックすると全部、吹き出しが表示される。
なので、イベント内で「オープンしていたらクローズする」という動作を入れないといけない。

他にもいろいろあるけど、とりあえず、このくらいで。

https://developers.google.com/maps/documentation/javascript/overlays?hl=ja

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル