Check

google mapのアイコン変更

| | コメント(0) | トラックバック(0)

google maps APIで住所検索時に表示される緑の矢印アイコンを使う場合のサンプル
jQuery.js使用(prototype.jsのほうが好きなんだけどな。。。)

$(document).ready( function(){
if ( !GBrowserIsCompatible() ) {
return false;
}
var map = new GMap2( document.getElementById( 'map' ) );
var point = new GLatLng( 37.4419, -122.1419 );
var icon = new GIcon();
icon.image = 'http://www.google.com/intl/en_ALL/mapfiles/arrow.png';
icon.shadow =
'http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png';
icon.iconSize = new GSize( 39, 34 );
icon.shadowSize = new GSize( 39, 34 );
icon.iconAnchor = new GPoint( 0, 0 );
icon.infoWindowAnchor = new GPoint( icon.iconSize.width / 3, 0 );
var maker = new GMarker( point, icon );
map.setCenter( point, 16 );
map.addControl( new GLargeMapControl() );
map.addOverlay( maker );

GEvent.addListener( maker, 'click', function() {
maker.openInfoWindowHtml(
'hogehoge'
);
$('.gmapWindow').get(0).parentNode.style.marginTop = '10px';
} );
} );
$(document).unload( function(){ GUnload() } );

ちなみに、「icon.infoWindowAnchor」がないと「main.js」の757行でエラーになる。
(ちょっとはまった。独自アイコンの場合は必須らしい)
あと、表示文字自体のstyleはそのまま「class=""」で指定できるけど、表示文字上部の空白はmarginとか、paddingでは変更できない。
(上のほうで「position: absolute」が指定されているので)
なので、表示分の親要素をjsでいじってる。

トラックバック(0)

このブログ記事を参照しているブログ一覧: google mapのアイコン変更

このブログ記事に対するトラックバックURL: http://0-9.sakura.ne.jp/mt/mt-tb.cgi/110

コメントする