今更ですが。
ホームページを製作する際、GoogleMapのAPIを使って、サイト上に地図と場所を示すオリジナルのピンを表示させるってことはもう当たり前に行なっていますが、そのピンがRetinaディスプレイなどの高解像度ディスプレイに対応しきれていないサイトが多いように感じます。
なので今回のエントリーではその方法をご紹介します。(自分のサイトにアクセスマップを入れてなかったなんて言えない。。)
あらかじめ緯度経度を調べておく必要があるので、GoogleMapで目的の住所を打ち込み、表示されたマーカーの上で右クリックして「この場所について」をクリックしてください。
赤枠の部分が緯度経度ですので、その部分をクリックすると左側に大きく表示されますのでそれをコピーするなりなんなりしておいてください。
まずはAPIを使うKeyを取得しなければなりません。APIキーの取得にはGoogleアカウントが必要になりますので、事前に用意しておいてください。
こちらのページから「キーの取得」をクリックして、指示に従えば取得できます。(手抜き)
その取得したキーを以下のようにはめ込みます。
[javascript]
<script src="https://maps.googleapis.com/maps/api/js?key=ここに取得したキーを入れる"></script>
[/javascript]
そして、以下のjavascriptをコピペして、それぞれの条件に当てはめます。
[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]
これをヘッダーなどに入れてください。これで表示させる準備は終わりです。
サイト上に実際に表示させるには、上記javascriptにあるように、
[html]
<div id="map"></div>
[/html]
これを表示させたい場所に貼り付けます。でもこのままでは表示されないので、スタイルシートなどで調整します。
[css]
#map{
width:100%;
height:400px;
}
[/css]
こんな感じで
これで高解像度ディスプレイに対応できるマーカーを表示させたマップの出来上がりです。
ここで実際のものをご覧いただけます。(自分のサイトにry)
最後までお付き合いいただき、ありがとうございました。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)