Google Maps APIを使い自社サイトでグーグルマップを表示、グーグルはどんどん便利になる

グーグルはなぜただなのかグーグルはどこまで便利になっていくのか。日経ビジネス9月25日号は「グーグルはなぜただなのか」という特集。興味深い記事だった。グーグルの話題が出ない日はないくらい、グーグルは進化していく。さて、グーグルの便利な機能「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&amp;v=2&amp;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


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2006/09/google-maps-api.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2006/09/google-maps-api.html」をQRコードで表示「https://dm2.co.jp/2006/09/google-maps-api.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。