Googleカスタムマーカーで文字の代わりに数字を使用する方法

Googleマップのマーカーは、地図上の特定のサイトを強調表示します。 デフォルトでは、Googleは個々のマーカーを四角で、複数のマーカーを文字で識別しますが、これは一部のアプリケーションには適していません。 たとえば、支社をサイト1、2、3と呼んでいる場合、番号付きのマーカーで文字よりも明確に識別できます。 プログラム内でカスタムマーカーを使用して、地図の場所に独自のラベルをデザインします。 これらのマーカーは、Google Charts APIを使用してコーディングできるカスタムアイコンを使用します。

1。

EclipseなどのJava開発プログラムでプログラムのソースコードを開きます。

2。

「初期化」機能までスクロールします。 このコードブロックはマップを定義し、それに対するオプションを定義します。 たとえば、コードは次のようになります。

関数initialize（）{

var coordinates = new google.maps.LatLng（42.346429、-71.097186）;

var myOptions = {

ズーム：4、

中央：座標、

mapTypeId：google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = new google.maps.Map（document.getElementById（ "map_canvas"）、myOptions）;

}

3。

マーカーの緯度と経度を定義する新しい線を追加します。 たとえば、マーカーで緯度42.349093と経度-71.101971を正確に特定する必要がある場合は、次の行を追加します。

var markerCoordinates = new google.maps.LatLng（42.349093、-71.101971）;

4。

次のブロックを追加してマーカーを作成してください。

var marker = new google.maps.Marker（{

position：markerCoordinates、

マップ：私たちの本社、

;））;

「markerCoordinates」を前の手順で作成した変数に置き換え、「ourHeadquarters」を自分のマップに関連付けられている変数に置き換えます。

5。

マーカーブロック内に次の行を追加してマーカーのアイコンを作成します。

icon： '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000'

6。

行の「A」を数字に置き換えます。 たとえば、 "1"に置き換えて、行を次のように変更します。

アイコン： '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999'

7。

"FF0000"をマーカーの背景のHTML 16進コードに変更します。 たとえば、背景色を黄色に設定するには、コード "FFFF00"を使用し、コードを "FFFF00"に置き換えて、次の行を

アイコン： '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1| FFFF00|999999'

8。

マーカー番号のテキストのHTML 16進コードに「999999」を変更します。 たとえば、このテキストを黒で書くには、 "000000"というコードを使用し、コードを "000000"に置き換えて、行を次のように変更します。

アイコン： '// chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000'