この記事の所要時間: 757

 ――――――――――――――――――――――――――――――――――
   Google Map で地図を表示しよう! Google Maps API Key を取得
 ――――――――――――――――――――――――――――――――――

 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
   1.Google アカウントを作る!
 ◆───────────────────────────────◆

 すでに持っていればそれを使用してください。
 持っていない場合は下記を参考にアカウントを取得してください!

  ▼Googleアカウントでアカウント発行
  https://www.google.com/accounts/ManageAccount
 
   上記URLを開きますと
   「Google アカウントをお持ちでない方はこちらから
       今すぐアカウントを作成 」
   と表示されますので
   「今すぐアカウントを作成」をクリックします。

   必要事項を記入し「同意して、アカウントを作成します。」をクリック。
   アカウントを作成してください。
 

 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
   2.Google Map API Key を取得する!
 ◆───────────────────────────────◆

 下記URLからAPI KEYを取得します!

 ▼ Google Maps API

 □I have read and agree with ・・・
   the terms and conditions (printable version)
 のチェックをチェック!

 「My web site URL:」に続くボックスに
 ご自分のサイトのURLを入力します。

 「Generate API Key」ボタンをクリックします!

 (※この際、入力したURLのサイト以外からは地図を表示することが出来ませんので
 ちょっと工夫するか、サイトごとに API KEY を取得する必要があります。)

 すると
 「Thank you for signing up for a Google Maps API key!」
 というメッセージとともに
 念願の「Google Maps API Key」が表示されました。

 その下部にあるサンプルコードを参考に
 「自分で作る!」っていうのが基本なんでしょうが
 ちょっと手間がかかりますよねー

 そ・こ・で

 今回は「API Key」と「緯度・経度」(画像名が違う場合は画像名も)
 を変更すればOK!の
 「手間なし簡単コード」
 をつけましたので参考にしてください!!

 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
   3.緯度経度を調べよう!
 ◆───────────────────────────────◆

 ▼ Geocoding 住所から緯度経度を検索

 このサイトで調べることが出来ます。

 住所またはランドマーク名を入れてみましょう。

 サンプルにある「ランドマーク名『東京タワー』で検索」を
 押してみるとすぐにわかると思います。

 このとき「ふきだし」に表示された
 「東京タワー
  座標: 35.658632, 139.745411」
 という文字列が緯度・経度です。

 では、実際に地図表示したい場所の住所等を入力し
 調べてみてください。

 このとき注意が必要なのは
 「緯度・経度」の順に表示されていることです。

 実際にGoogleマップのコードに入れる順番は
 (経度, 緯度)となります。

 コピーしてきたものの順番を入れ替える必要があります。

 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
   4.目印を作ろう!
 ◆───────────────────────────────◆

 コンサイズのサイトでは下記の画像2つを使用しています。

 ▼ 目印

 ▼ 目印(影)

 あまり良いサンプルではないですな・・・(笑)

 画鋲マークや旗などご自分の好きなものをどうぞ!

 ◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
   5.手間なし コード! (おまけ)
 ◆───────────────────────────────◆

 ・・・ここから・・・ここまで・・・の部分をコピーして
 地図を貼り付けたいところのHTMLに直接貼り付けます。

 注意点
 ・(あなたのキー)の部分は確実に取得したAPI Key に変更してください。
 ・緯度・経度を変更すること!このままだとコンサイズになります!
 ・リンク部分も変更してください!本当にコンサイズになります!(笑)

————————— ここから —————————


<!-- 地図表示部 本体 -->
<!-- width と height は適宜変更してください! -->
<div id="map" style="width: 300px; height: 300px"></div>
<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=(あなたのキー)"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
  var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());

// 3.で取得した 緯度、経度を (経度, 緯度)の順で入力する
//
// new GPoint(139.711606, 35.646643) ←この部分
//
var point = new GPoint(139.711606, 35.646643);

  map.centerAndZoom(point, 0);

  var icon = new GIcon();

// マーカーのアイコン画像指定
  icon.image = "map_arrow.png";
// マーカーの影アイコン画像指定
  icon.shadow = "map_arrow_shadow.png";
// アイコンのサイズを記述
  icon.iconSize = new GSize(34, 25);
// 影アイコンのサイズを記述
  icon.shadowSize = new GSize(34, 25);
  icon.iconAnchor = new GPoint(1, 23);
  icon.infoWindowAnchor = new GPoint(10, 10);
// もう一度マーカーのアイコン画像指定
  icon.transparent = "map_arrow.png";

  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
//
// この↓のhttp:・・と「株式会社コンサイズ」の部分は
// ご自分のサイトに変更してください
//
  marker.openInfoWindowHtml("<b><a href='http://www.comsize.com/'>株式会社コンサイズ</a></b>" );
});

map.addOverlay(marker);
//]]>
</script>

————————— ここまで —————————

 出来ましたかーーーー!?

 成功するとこのような感じになります!

 ▼ 株式会社コンサイズ 会社概要

 がんばってください!!!

———————————————————————-

この内容は

私が発行しているメルマガ 「なるほど!よくわかる!ホームページ運営」にて掲載したものです!

毎週木曜日発行のメルマガ

なるほど!よくわかる!ホームページ運営」ご購読希望の方は
↓フォームよりご登録下さい!よろしくお願いいたします。

メルマガ登録・解除 ID: 0000199475
なるほど!よくわかる!ホームページ運営!

   
バックナンバー powered byまぐまぐトップページへ

<

ホームページ運営コンサルタント さとうたけし

この記事が気に入ったら
いいね ! しよう

Twitter で