GoogleMaps アイコンのサンプル

スプライトの例

次のスプライト用アイコンセットは幅154ピクセル、高さ44ピクセル(ひとつあたり幅30ピクセル、高さ44ピクセル)です。

Sprite

1ピクセルのオフセット横並びで作成したので、

  • 青= new google.maps.Point(0, 0);
  • 緑= new google.maps.Point(31, 0);
  • 橙= new google.maps.Point(62, 0);
  • 紫= new google.maps.Point(93, 0);
  • 赤= new google.maps.Point(124, 0);

以上のように個別のマーカー位置を指定します。マップにこのアイコンを指定するには

var markerIcon = {anchor: new google.maps.Point(15, 44), origin: type, size: new google.maps.Size(30, 44), url: "./sprite-icon.png"};

以下に使用例を示します。

スプライトは CSS Sprite Generator で生成しました。シャドウは Icon Shadowmaker で作れます。

Googleのアイコン例

markerA.png http://www.google.com/mapfiles/markerA.png
markerZ.png http://www.google.com/mapfiles/markerZ.png
icon0.png http://maps.google.com/mapfiles/kml/pal2/icon0.png (pal3, pal4, pal5 各 icon63.png まで)
icon23.png http://maps.google.com/mapfiles/kml/pal3/icon23.png (同上)
icon63.png http://maps.google.com/mapfiles/kml/pal5/icon63.png (同上)
dd-start.png http://www.google.com/mapfiles/dd-start.png
green.png http://labs.google.com/ridefinder/images/mm_20_green.png
red.png http://labs.google.com/ridefinder/images/mm_20_red.png
yellow.png http://labs.google.com/ridefinder/images/mm_20_yellow.png
shadow.png http://labs.google.com/ridefinder/images/mm_20_shadow.png

使い方はこちらのブログ記事またはマップのサンプル一覧を参照。

Markers Google Maps icons | Map Icons Collection もおすすめ。

※以下のアイコンは、直リンクで呼び出すことはできません。必ず持ち帰って各自のサーバーでご利用ください。

marcador_azul.png marcador_azul.png 20px-34px marcador_granate.png marcador_granate.png 20px-34px
mano.png mano.png 20px-34px mano2.png mano2.png 20px-34px
pin.png pin.png 20px-34px pin2.png pin2.png 20px-34px
balloon.png balloon.png 20px-34px balloon-gr.png balloon-gr.png 20px-34px
balloon-rd.png balloon-rd.png 20px-34px marcador_amarillo.png marcador_amarillo.png 20px-34px

updated: