HOME > > > Googleマップのマーカーをアイコンに変える方法

Googleマップのマーカーをアイコンに変える方法

アイコンを設置

Googleマップに設置するマーカーをアイコンに変更します

Googleマップで詳細の位置を示すマーカー。そのままでも詳細な場所は解りますが遊び心で会社のロゴマークやかわいいアイコンに変更すると、より「自社感」が増し見た目も楽しくなります。 Googleマップを設置する際は、デザインによってアイコン設置の方がサイトコンセプトに合わせてマーカーかアイコンを選ぶのもいいと思います。

サンプルはこちら

マップの設置方法

マップの設置方法は以前の記事を確認してください。

アイコン設置を含めたマップのコード

下記はマーカーを含めたGoogleマップの設置コードです。


<script>
function initialize() {
  var latlng = new google.maps.LatLng(37.4220, -122.08491731);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
   /* アイコン設定 */
  var icon = new google.maps.MarkerImage('images/ico_map.png',
    new google.maps.Size(73,51),
    new google.maps.Point(0,0),
    new google.maps.Point(19,51)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: 'アイコン設置',
  };
  var marker = new google.maps.Marker(markerOptions);
}
</script>

アイコン設置部分は以下の部分です。


   /* アイコン設定 */
  var icon = new google.maps.MarkerImage('images/ico_map.png',
    new google.maps.Size(73,51),
    new google.maps.Point(0,0),
    new google.maps.Point(19,51)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: 'アイコン設置',
  };
  var marker = new google.maps.Marker(markerOptions);

解説

アイコンになる画像

画像は「.png」で背景を透過して作ってください。 画像は下記の部分のパスを変更して読み込みます。


var icon = new google.maps.MarkerImage('images/ico_map.png',

画像サイズを入力

「new google.maps.Size」は画像の縦・横サイズ(px)を入力します。


new google.maps.Size(73,51),

中心の位置を入力

「new google.maps.Point」はアイコンの中心位置(吹き出しの中心)を入力します。
サンプルでは左から19pxの位置が吹き出しの中心になっています。


new google.maps.Point(19,51)

設置完了

これでアイコンが設置されました。
アイコンは設置以外にも色々遊べるのでまたの機会にご紹介できたらと思います。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket