Google MAPを編集する
GoogleMapの吹き出し内の文章を、自社専用の会社案内に変更することが出来ますが、多少手間がかかるのと、ホームページ制作の知識が必要となります。
地図上の位置だけ分かれば良いという方は、Googleマップ簡単貼り付け手順の、簡易グーグルマップの設置をご覧ください。
また、吹き出し内にGoogle指定の形式で自社情報を表示したいという方は、自社情報付きグーグルマップの設置をご覧下さい。
Google Mapを貼り付ける
マップを表示するためのページを作り、そのマップをフレームで特定のページから読み込む形を取ります。
1. 元となるマップページを作る
マップを表示する元となるページを作ります。
<head>
<head>内に下記を記述し、key=のあとには後述する取得したAPI Keyを貼り付けます。
<script src="http://maps.google.com/maps?file=api&v=1&key=取得したAPI" type="text/javascript" charset="utf-8"></script>
<body>
<body>内に下記を記述し、地図サイズや経緯、縮尺などをサイトにあわせ変更します。緯度・経度については、Geocodingで調べる事ができます。
<div id="map" style="position:absolute;width: 500px; height: 400px; border: 1px;"></div><!--地図サイズ-->
<script type="text/javascript">
var point = new GLatLng(経度,緯度); <!--座標-->
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.setCenter((point), 14); <!--縮尺-->
map.addControl(new GOverviewMapControl(new GSize(120,120))); <!--右下の外観地図-->
var marker = new GMarker(point);
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("<div id='message'>会社案内</div>"); });
map.addOverlay(marker);
marker.openInfoWindowHtml("<div id='message'>会社案内</div>");
</script>
APIkeyを取得
GoogleMapをサイト内で利用するために、張り付けるサイト専用のAPIkeyを取得します。
Google Maps APIにアクセスし、一番下の欄にURLを入力し、Generate API Keyをクリック。
2. マップを表示するページを作成
元なるマップページが出来たら、そのマップをフレーム表示するためのソースをページに貼り付けます。Googleのマップガイドを添付するとより親切です。
【GoogleMap】
<a href="http://www.google.co.jp/intl/ja_jp/help/maps/tour/" target="_blank"> Google マップガイドはこちら</a>
<iframe title="アクセスマップ" marginwidth="1" marginheight="1" src="元となるマップページのURL" frameborder="0" width="500" scrolling="no" height="400">アクセスマップ</iframe>
当サイトの場合
1.で作成したページをフレーム表示したのが下のGoogleマップです。
フレーム内に表示されているGoogleマップは印刷されませんので、1.で作成したページは印刷用マップとしてリンクを張っても良いでしょう。
【GoogleMap】 Google マップガイドはこちら
SEOウェブネット
埼玉県入間市鍵山3-12-3TEL：04-2937-4114
FAX：04-2937-4118
