API Overview / Overlays

Markers and Icons

http://www.google.com/apis/maps/docu­mentation/

Version 2 (2006.4)

The GMarker constructor takes an icon and a point as arguments and exports a small set of events like "click". See the overlay.html example above for a simple example of creating markers.

The most difficult part of creating a marker is specifying the icon, which is complex because of the number of different images that make up a single icon in the Maps API.

Every icon has a foreground image and a shadow image. The shadow should be created at a 45 degree angle (upward and to the right) from the foreground image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon foreground image. The shadow should be a 24-bit PNG image with alpha transparency so that the edges of the shadow look correct on top of the map.

The GIcon class requires you specify the size of these images when you initialize the icon so the Maps API can create image elements of the appropriate size. This is the minimum amount of code required to specify an icon (in this case, the icon used on Google Maps):

var icon = new GIcon();
icon.image = "marker.png";
icon.shadow = "shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

The GIcon class also has several other properties that you should set to get maximum browser compatibility and functionality from your icons. For example, the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the entire icon image (including the transparent parts) will be clickable in Firefox/Mozilla. See the GIcon class reference for more information.

Version 1

The GMarker constructor takes an icon and a point as arguments and exports a small set of events like "click". See the overlay.html example above for a simple example of creating markers.

• GMarker コンストラクタは引数としてポイントとアイコンを受ける。
• マーカーにはクリックイベントあり

The most difficult part of creating a marker is specifying the icon, which is complex because of the number of different images that make up a single icon in the Maps API.

• マーカーをつくるポイントはアイコンの指定。

Every icon has (at least) a foreground image and a shadow image. The shadow should be created at a 45 degree angle from the foreground image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon foreground image. The shadow should be a 24-bit PNG images with alpha transparency so that the edges of the shadow look correct on top of the map.

• アイコンにはフォアグラウンドイメージとシャドーイメージがある。
• シャドーイメージはフォアグラウンドイメージを45度傾けてつくる。
• シャドーとフォアグラウンドイメージは左下隅で揃えます。
• シャドーイメージはアルファトランスペアレンシーの24ビットPNG

The GIcon class requires you specify the size of these images when you initialize the icon so the Maps API can create image elements of the appropriate size. This is the minimum amount of code required to specify an icon (in this case, the icon used on Google Maps):

• GIconクラスはイメージのサイズを指定する必要あり。
• 以下はアイコンを指定する最小のコード

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

The GIcon class exports 7 more properties that you should set to get maximum browser compatibility and functionality from your icons. For example, the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the entire icon image (including the transparent parts) will be clickable in Firefox/Mozilla. See the GIcon class reference for more information.

• GIconクラスは７つのプロパティでブラウザの互換性と機能性を得るようにセットする
• imageMapプロパティはアイコンの非透明部分を指定（？？）。もしセットしないとFirefox/Mozillaで非透明部分をクリックできてしまう。（これでいい？？）

（2005.12）

The GMarker constructor takes an icon and a point as arguments and exports a small set of events, such as "click". See the overlay example above for a simple example of creating markers.
　
The most difficult part of creating a marker is specifying the icon, which is complex because of the number of different images that make up a single icon in the Maps API. However, if you just want a generic icon, you can create a GMarker without specifying an icon.
　
Icons are usually in the form of stylized pushpin images, with a tip that appears at the location specified in the GMarker constructor.
　
Every icon has (at least) a foreground image and a shadow image. The shadow should be created at a 45 degree angle (upward and to the right) from the foreground image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon foreground image. The shadow should be a 24-bit PNG image with alpha transparency so that the edges of the shadow look correct on top of the map.
　
The GIcon class requires you specify the size of these images when you initialize the icon so the Maps API can create image elements of the appropriate size. This is the minimum amount of code required to specify an icon (in this case, the icon used on Google Maps):

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

The GIcon class also exports seven other properties that you should set to get maximum browser compatibility and functionality from your icons. For example, the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the entire icon image (including the transparent parts) will be clickable in Firefox/Mozilla. See the GIcon class reference for more information.