今更ですが。

ホームページを製作する際、GoogleMapのAPIを使って、サイト上に地図と場所を示すオリジナルのピンを表示させるってことはもう当たり前に行なっていますが、そのピンがRetinaディスプレイなどの高解像度ディスプレイに対応しきれていないサイトが多いように感じます。

なので今回のエントリーではその方法をご紹介します。（自分のサイトにアクセスマップを入れてなかったなんて言えない。。）

緯度経度を調べる

あらかじめ緯度経度を調べておく必要があるので、GoogleMapで目的の住所を打ち込み、表示されたマーカーの上で右クリックして「この場所について」をクリックしてください。

赤枠の部分が緯度経度ですので、その部分をクリックすると左側に大きく表示されますのでそれをコピーするなりなんなりしておいてください。

Google Map API Keyを取得する。

まずはAPIを使うKeyを取得しなければなりません。APIキーの取得にはGoogleアカウントが必要になりますので、事前に用意しておいてください。

こちらのページから「キーの取得」をクリックして、指示に従えば取得できます。（手抜き）

その取得したキーを以下のようにはめ込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=ここに取得したキーを入れる"></script>

そして、以下のjavascriptをコピペして、それぞれの条件に当てはめます。

<script>
var myLatlng = new google.maps.LatLng(経度, 緯度);
function initialize() {
  var mapOptions = {
    zoom : 17,
    center : myLatlng,
    scrollwheel: false
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var image = {
    url : 'ピンの画像',
    scaledSize : new google.maps.Size(100, 100)//画像のサイズを入力。ここでは縦横100pxなので画像自体は200pxの平方にしておく・
  }
 var marker = new google.maps.Marker({
  position : myLatlng,
  map : map,
 icon : image,
 title : "マーカーのタイトルを入力"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

これをヘッダーなどに入れてください。これで表示させる準備は終わりです。

実際に表示させる

サイト上に実際に表示させるには、上記javascriptにあるように、


<div id="map"></div>

これを表示させたい場所に貼り付けます。でもこのままでは表示されないので、スタイルシートなどで調整します。

#map{
  width:100%;
  height:400px;
}

こんな感じで

これで高解像度ディスプレイに対応できるマーカーを表示させたマップの出来上がりです。

ここで実際のものをご覧いただけます。（自分のサイトにry)

最後までお付き合いいただき、ありがとうございました。

2017.09.25制作コラム

関連情報