ホーム > Google Maps (全4件)
  • マーカーを1文字ピンにする

    マーカーを1文字ピンにする。

    /* 標準影なしの1文字マーカー */
var marker= new google.maps.Marker( {
	position: pos, map: map, title: title,
	icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+encodeURI(title.substr(0,1))+'|FF0000|000000' } );

/* 標準影付きの1文字マーカー */
var marker= new google.maps.Marker( {
	position: pos, map: map, title: title,
	icon: { anchor: { x:10, y:34 }, url: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld='+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );

/* 左傾き星なし影なしの1文字マーカー */
var marker= new google.maps.Marker( {
	position: pos, map: map, title: title,
	icon: { anchor: { x:22, y:32 }, url: 'http://chart.apis.google.com/chart?chst=d_map_xpin_letter&chld=pin_sleft|'+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );

/* 右傾き星なし影なしの1文字マーカー */
var marker= new google.maps.Marker( {
	position: pos, map: map, title: title,
	icon: { anchor: { x:10, y:34 }, url: 'http://chart.apis.google.com/chart?chst=d_map_xpin_letter&chld=pin_sright|'+encodeURI(title.substr(0,1))+'|FF0000|000000' } } );

    ピンに指定する1文字には日本語（UTF-8）にも対応し、その後にピンの塗りつぶし色、文字色を指定する。影や傾きを指定する場合はピン先がずれるので、’anchor’でズレを補正すること（上記は参考で必要に応じて調整を）。傾きなしの☆ありにする場合は’chst=d_map_xpin_letter&chld=pin_start’を指定。このほかにもいろいろタイプのピンタイプがある。詳しくは「Dynamic Icons」を参照。

    キーワード:
  • Google Mapsの天気レイヤーを消す

    天気レイヤーを消す（非表示）。

    /* 変数mapにはGoogle Mapsオブジェクト、weatherLayerには天気レイヤーオブジェクトが入っている */
weatherLayer.setMap( null );

/* 表示と非表示を交互に切り替える場合 */
weatherLayer.setMap( weatherLayer.getMap()? null: map );

    Google MapsのレイヤーはsetMapメソッドでnullを指定すると非表示となる。getMapメソッドで指定されているGoogle Mapsオブジェクトを取得できるので、その内容を調べて表示と非表示を交互に切替できる。

    キーワード:
  • Google Mapsに天気レイヤーを追加する

    天気レイヤー（摂氏表示）を追加する。

    /* 変数mapにはGoogle Mapsオブジェクトが入っている */
var weatherLayer = new google.maps.weather.WeatherLayer( {
		temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
	} );
weatherLayer.setMap( map );

    Google Maps APIのJavaScript読み込み時にlibraries=weatherパラメータの指定を忘れないこと。サンプルで紹介されていたのは華氏表示（FAHRENHEIT）だったので、ここでは摂氏表示（CELSIUS）にしてみた。

    キーワード:
  • Google Mapsを初期化する

    idがgoogle-mapsの要素にマップを適用する。

    
$.event.add( window, 'load', function() {
	$( '#google-maps' ).each( function () {
		mapOptions = {
			zoom: 6,
			center: new google.maps.LatLng( 38.682, 139.333 )
		};
		var map = new google.maps.Map( $(this)[0], mapOptions );
	} );
} );

    loadイベントにて、idがgoogle-mapsの要素にマップを適用する。google.maps.Mapの第1パラメータはマップを適用させるDOMエレメントを指定するが、上記の通り$(this)[0]でいい。

    キーワード:
 
 
ツールバーへスキップ