Googleマップで、自分が決めた自由な場所にピンを立てる方法です。
これは、HTMLとかJavascriptが大体わかる人、自分でHTMLを更新できる人向けの内容です。
Google Maps APIを利用する
Google Maps APIを利用します。
単純にやり方を書きますね。
まず、HTMLのヘッダー部分に、Google Maps APIのJavascriptを埋め込む。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
※コードのfalseの部分は、スマホなどGPS他応の機器で利用する場合はtrueに変えるようです。
次に、地図を表示する設定するコードをこれまたヘッダーに入れる。
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('地図を表示させるところに入れるHTMLのID');
var myOptions = {
zoom: ズーム,
center: new google.maps.LatLng(緯度, 経度),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(緯度, 経度),
map: map,
title: 'ピンのタイトル'
});
var infowindow = new google.maps.InfoWindow({
content: '場所のタイトル<br />ここに入れる文字を入れて住所など入れる',
size: new google.maps.Size(横幅, 高さ)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
</script>
各項目の設定
オレンジ色の部分を自分の設定にあわせて変えて下さい。
「地図を表示させるところに入れるHTMLのID」は地図を表示する場所に入れるHTMLコードのIDと同じものを入れる。
CSS側でこのIDに横幅、立て幅を入れて、地図を表示する大きさを指定してください。HTMLに直接書いてもOKです。
<div id="地図を表示させるところに入れるHTMLのID"></div> もしくは <div id="地図を表示させるところに入れるHTMLのID" style="width : 800px; height : 600px;"></div>
緯度, 経度は、地図のピンを表示させる緯度・経度を数値で入力します。
緯度・経度の取得は以下のサイトで取得できます。
「緯度・経度を（住所から|地図から）取得したり、緯度経度を入力してマークする [Google maps API] – レストラン牡丹」
ピンのタイトルは、ピンにマウスをあわせると表示されます。
場所の名前でいいんじゃないでしょうか。
場所のタイトル<br />ここに入れる文字を入れて住所など入れるは、ピンをクリックした際に表示される吹き出しの中の文字です。HTMLで記述します。CSSで文字の大きさ調整できます。
横幅, 高さは、吹き出しの窓の大きさです。ピクセル単位で数値を入力します。
以上です。
これを地図を表示するページのHTMLに、ヘッダーにJavascriptを、地図を表示したい場所HTMLを入れると、自由に設定した場所にピンを表示させ、吹き出し内も自由に記述できるマップをページに入れられます。
詳しくは、こちらのサイト「手軽になった！Google Maps API V3」で確認してください。
まとめ
HTMLなどを基本理解していないとちょっと難しいですが、わかっている人は、CSSなどを使ってさらにいろいろアレンジできるんじゃないでしょうか！
仕事で探していて見つけた内容で、今後も使うだろうと思ったので、自身の備忘録して記事に残しました！
