Google Maps API・マイマップの使い方・活用法をご紹介しています。

マーカー(ピン・アイコン)を変更する |Google Maps API v3

Google Maps API(v3) を利用して表示したマーカー(アイコン)は、
Google Chart APIで提供されている様々なアイコンに変更することができます。
ここではデフォルトのアイコンからアイコンの変更を行います。

 

地図の表示

指定したGPS座標を中心にマーカー(アイコン)を表示します。

以下で表示しているマーカーの画像はGoogle Chart APIのイメージのURLを指定して設定していますが、
任意の画像URLなどを指定する事で自在にマーカー(アイコン)を変更することができます。

 

マーカー(アイコン)の変更方法

マーカーアイコンの変更自体は、マーカーの生成時に簡易的に指定する方法と、
マーカーオブジェクトを作成して、設定する方法が利用できます。

 

単純URL指定の場合

マーカーオブジェクトのプロパティーに対して、
「icon: [URL]」 の形式で設定を行えば変更が行えます。

[URL]部に指定するURLはインターネットパスの他、
Data URLスキームも利用できます。

既にGoogleによって公開されている、
オープンなアイコンを指定して利用することもできます。

以下でそれぞれの手順をご紹介しています。

 

マーカーオブジェクトによる指定の場合

マーカーアイコンの指定をマーカーオブジェクトを生成し、
個別にオプションを指定して設定する場合には、以下の方法を利用します。

マーカーオブジェクトを介することで、
マーカーのサイズや位置といった細かなオプション指定が行えるようになります。

 

参考

Dynamic Icons | Image Charts (Deprecated) | Google Developers

公開日:
最終更新日:2017/01/13

コンテンツ
すべて展開 | すべて省略