ホームページ制作/WEBサイト制作、システム開発の株式会社コンサイズ東京都渋谷区恵比寿

株式会社コンサイズトップ > メールマガジンバックナンバー > 第４６号 2007.07.22

なるほど！よくわかる！ホームページ運営！第４６号 2007.07.22

まぐまぐで発行中！なるほど！よくわかる！ホームページ運営

　━━━━━━━━━━━━━━━━━━━━━━ 第46号━ 2007.07.22 ━
　　　
　　　なるほど！よくわかる！ホームページ運営！
　　　
　━━━━━━━━━━━━━━━━━━━━━━━━━━発行部数121部━

　サイト内の地図の表示どうしてますか？

　地図画像作るのもいいんですが、手間もかかるし
　おしゃれに出来た！！　って思っても見にくくてわかりずらいことも・・・

　そこで「Google Map」を利用しよう！っていうのが今回の記事です！
　日本のGoogle Mapって、あの「住宅地図」で有名な
　「ＺＥＮＲＩＮさん」の地図なんですよねー

　とってもキレイでもともと「住宅地図」の会社だけあって建物が細かい！
　オススメします！！！

　ちょっと難しいですが、一度設置すればあとは楽！
	・・・なので、ぜひ挑戦してみてください！

　■ Google Map で地図を表示しよう！
　■ 編集後記
　
　――――――――――――――――――――――――――――――――――
　　　Google Map で地図を表示しよう！ Google Maps API Key を取得
　――――――――――――――――――――――――――――――――――

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　１．Google アカウントを作る！
　◆───────────────────────────────◆

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

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

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

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　２．Google Map API Key を取得する！
　◆───────────────────────────────◆

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

　▼ Google Maps API
http://www.google.com/apis/maps/signup.html

　□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」と「緯度・経度」（画像名が違う場合は画像名も）
　を変更すればＯＫ！の
　「手間なし簡単コード」
　をつけましたので参考にしてください！！

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　３．緯度経度を調べよう！
　◆───────────────────────────────◆

　▼ Geocoding 住所から緯度経度を検索
http://www.geocoding.jp/

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

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

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

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

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

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

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

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

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　４．目印を作ろう！
　◆───────────────────────────────◆

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

　▼ 目印
http://www.comsize.com/map_arrow.png

　▼ 目印（影）
http://www.comsize.com/map_arrow_shadow.png

　あまり良いサンプルではないですな・・・（笑）

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

　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　　５．手間なし コード！　（おまけ）
　◆───────────────────────────────◆

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

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

--------------------------- ここから ---------------------------
	<!-- 地図表示部 本体 -->
	<!-- width と height は適宜変更してください！ -->
    <div id="map" style="width: 300px; height: 300px"></div>
    <script src="http://maps.google.com/maps?file=api&v=2&key=（あなたのキー）"
      type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    //<![CDATA[
　　var map = new GMap(document.getElementById("map"));
	map.addControl(new GSmallMapControl());

	// ３．で取得した 緯度、経度を （経度, 緯度）の順で入力する
	//
	// 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>

--------------------------- ここまで ---------------------------


　出来ましたかーーーー！？


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

　▼ 株式会社コンサイズ 会社概要
http://www.comsize.com/company.html

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

　
　◆━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆
　　編集後記
　◆───────────────────────────────◆
　
　いやいやいやいや、大変ご無沙汰して申し訳ございませんでした！！

　個人的に体調崩したこととスケジュールが立て込んだのが重なって
　大変なことになっておりました。

　ま、ネタがまとまらなかったのもまた事実ではあるんですが・・・

　私のブログや株式会社コンサイズのホームページへのアクセス解析を
　見ると断然多いのが「技術的なキーワード」での検索。

　たとえばバックナンバーで紹介した「携帯電話」と「パソコン」からの
　アクセスを筐体によって切り分ける方法とか、Google Analytics の設定など

　そういえば最近こんな技術系の記事を書いていなかったので
　今回は「Google Map」を利用する方法を書いてみました。

　実は最近、私のお客様でお店のお引越しをされたお客様がおりまして
　地図を書き直そうかな・・・と思ったのですが

　「実際に書いてみると、なかなか難しい！」

　ホント！

　それなら「地図サービス」を利用した方が楽かな・・・
　ということで調べたことなので
　タイムリーに記事に出来たのでした。

　また、目新しい技術があったら、ちょっと枯れたところで（笑）
　記事にしてみます。


　------------------------------------------------------------------
　人材募集！の件　またまた掲載　よろしくお願いします！
　------------------------------------------------------------------
　
　【男女年齢問わずPG/SE募集！】
　１．PHP,Perlが出来る方（Javaが出来れば尚可！）
　２．サイト制作・システム開発に興味がある方
　３．就職活動の途中で見てみてもいいよっていう学生さん
　
　こちらは内勤になりますので東京近郊の方でお願いします。
　詳細は http://www.comsize.com/news.html まで
　面接あります！ご連絡お待ちしております！
　
　このメルマガの記事はわたしのブログでも掲載しておりますよぉ。
　
　▼ブログ「ホームページ運営コンサルタント さとうたけし」
http://blog.comsize.com/
　
　ご感想は上記ブログに「コメント」という形でも受け付けております！
　是非、読んでみてください！
　
　よろしくお願いします！
　
　「ホームページを優秀な営業マンに！」
　
　　私もそのお手伝いをします！
　
　◎ このメールマガジンを読んだご感想・ご意見・ご質問、また仕事依頼
　 などございましたらなんなりとお気軽にメールをください。
　 お返事は必ず書きますよぉ！
　
　------------------------------------------------------------------
　☆ ホームページ運営コンサルタント
　☆ 発行人： 株式会社コンサイズ　さとう たけし
　☆ 弊社HP： < http://www.comsize.com/ >

　☆ メール： < mag@comsize.com >

　☆ mixi プロフィールこちらです。
　　http://mixi.jp/show_friend.pl?id=1443846
　------------------------------------------------------------------