ホーム > Marker (全1件)
  • マーカーを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」を参照。