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"};

使用例:
icon-demo

スプライトは CSS Sprite Generator で生成しました。

Googleのアイコン例

markerA.png https://www.google.com/mapfiles/markerA.png
markerZ.png https://www.google.com/mapfiles/markerZ.png
icon0.png https://maps.google.com/mapfiles/kml/pal2/icon0.png (pal3, pal4, pal5 各 icon63.png まで)
icon23.png https://maps.google.com/mapfiles/kml/pal3/icon23.png (同上)
icon63.png https://maps.google.com/mapfiles/kml/pal5/icon63.png (同上)
dd-start.png https://www.google.com/mapfiles/dd-start.png

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

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

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: