Google Maps APIを使い自社サイトでグーグルマップを表示、グーグルはどんどん便利になる中小企業診断士ブログ遠田幹雄

中小企業診断士ブログとは

中小企業診断士ブログとは中小企業診断士＆ＩＴコーディネータで株式会社ドモドモコーポレーションの代表の遠田幹雄が書いている公式ブログを抽出して再構成したものです。

原典の公式ブログをご覧になりたい方は、ほぼ毎日更新している「中小企業診断士ブログは遠田幹雄です。どもども、ドモドモ(^^)v」へどうぞ。

遠田幹雄の予定表

遠田幹雄の予定は【Googleカレンダー】で表示しています。

※ログインすると予定をご覧いただけます。

メールでの問合せはこちらから
ご意見／ご感想はSSL対応の
メールフォームからどうぞ

グーグルはどこまで便利になっていくのか。日経ビジネス９月２５日号は「グーグルはなぜただなのか」という特集。興味深い記事だった。グーグルの話題が出ない日はないくらい、グーグルは進化していく。さて、グーグルの便利な機能「Google Maps API」を使って、自社サイトにグーグルマップを載せてみた。グーグルマップを使うにはAPIキーを取得しなければならないが意外に簡単。ドモドモコーポレーションの地図を作成しドモドモコーポレーションホームページに掲載してみた。

さて、昨日は11位。今日は何位かな？⇒

▼設置ページ
http://www.domo-domo.com/map.htm

▼使用したソース（実際はさらにタグを追加している）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ドモドモコーポレーション　Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=取得したAPIキー"
   type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function createMarker(point, icon, html) {
   var marker = new GMarker(point, icon);
   GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml(html);
   });
   return marker;
}
function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(36.746828,136.714811), 1);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      var marker1 = createMarker(new GLatLng(36.746828,136.714811), null, "<p>▼どもども(^^)v<br /><a href=http://www.domo-domo.com/>株式会社ドモドモコーポレーション</a><br />石川県かほく市木津ロ64-1</p>");
      map.addOverlay(marker1);
   }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
▼株式会社ドモドモコーポレーションご案内図
<div id="map" style="width: 500px; height: 450px">
</div>
</body>
</html>

※この文字色のところは各自差し替えが必要

【参考にしたサイト】
http://www.google.co.jp/apis/maps/documentation/
http://ecogis.sfc.keio.ac.jp/developers/gmaps/haru_v2.html
http://allabout.co.jp/internet/javascript/closeup/CU20060815A/index.htm
http://iwaki.chiikigaku.com/modules/news/article.php?storyid=14

…でした。m(__)m

コンテンツ

アーカイブ

当サイトとページの説明

■このサイトは、「中小企業診断士ブログ中小企業診断士ブログは株式会社ドモドモコーポレーション代表経営コンサルタントで中小企業診断士＆ＩＴコーディネータの遠田幹雄（とおだみきお）が書いています。」です。
■記事内容は「Google Maps APIを使い自社サイトでグーグルマップを表示、グーグルはどんどん便利になる」。最後までお読みくださいましてありがとうございます。

コメント (5)

おぱびにあ:

map.setCenter(new GLatLng(36.746828,136.714811), 1);
の最後を15から17ぐらいにしたほうが、サイズが拡大されて、地図としては使いやすいとおもいます。
受け狙いでは、開始にマップを衛星写真にすればＯＫかと
以下をmap.addControlの次に追加
map.setMapType(G_SATELLITE_TYPE);//衛星写真のタイプを指定

投稿者: おぱびにあ | 2006年9月25日 12:24

日時: 2006年9月25日 12:24

遠田幹雄:

どもども、おぱびにあさん
たいへんありがたいご助言をありがとうございます。
> 受け狙いでは、開始にマップを衛星写真にすればＯＫかと
お見通し！
ご指摘のとおりでございます。ﾍﾟｺﾘ m(__)m

> 以下をmap.addControlの次に追加
> map.setMapType(G_SATELLITE_TYPE);//衛星写真のタイプを指定
なるほど。
このほうがいいですね。(^^)v
早速、変更しました。
どもども、ありがとうございます。

投稿者: 遠田幹雄 | 2006年9月25日 14:00

日時: 2006年9月25日 14:00

つかさ:

これ、やってみたかったんです。
いただきぃ＼(^O^)／

投稿者: つかさ | 2006年9月26日 17:42

日時: 2006年9月26日 17:42

もっぷ: