制作コラム

Google MapのマーカーをRetina対応にする方法【コピペ可】

今更ですが。

ホームページを製作する際、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)

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

一覧に戻る

ホームページ
制作業務

コーポレートサイト制作

コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。

More

ブランドサイト・集客サイト制作

ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。

More

採用サイト制作

採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。

More

ECサイト制作

ECサイトは、事業の形態や規模によって求められる内容や機能が異なります。
アルラボではお客様の事業内容や求められる結果に応じてさまざまな形態のECサイトをご提案しています。

More

サービス一覧

Webマーケティング
集客対策業務

リスティング広告運用

検索ユーザーに貴社のビジネスの接点を作るリスティング広告。
限られた予算の中で費用対効果を重視した最適なリスティング広告運用を行います。

More

SNS・YouTube広告運用

検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。

More

SEO対策

サイトの検索表示順位を上昇させるSEO対策。
内部施策を標準化し、サイトの構造を正しくクローラーに伝え、適切な検索キーワードからユーザーが求める情報とは何なのかを追求します。

More

コンテンツマーケティング

ユーザーにとって価値のあるコンテンツを継続的に発信し、幅広いワードでアプローチするユーザーをキャッチします。

More

MEO対策

近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。

More

Webアクセス解析

ユーザーの属性や特徴、そして行動を分析し、コンバージョンに繋がる課題を解決します。ウェブサイトを着実に成長させる指標としてアクセス解析からの改善提案を行います。

More

お問い合わせ
Contact

私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。

ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。

お問い合わせ・ご相談

ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。

お問い合わせ・ご相談

お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。

0952-20-1501(佐賀)

092-717-3446(福岡)

平日:9:00~17:00