Google maps API

Google maps API は、その名の通り Google maps の機能を使用するための API で、JavaSciprt に対応しています。
Google maps API を使うことにより、Google maps をよりカスタマイズして使うことが出来ます。

API キーについて

Google maps API
API を使うためにはまず初めにキーを取得する必要があるので、http://www.google.com/apis/maps/ にてキーを取得しましょう。

以下のページで非常にわかりやすく解説されているのでおすすめです(^_^;
http://www.geekpage.jp/web/google-maps-api/

なお、以前は API キー無しでも利用できたのですが、2016/06/22 からは API キーが必須となりました。
Google からの公式アナウンスはこちら。
https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update

使用例

以下、適当に使用例を抜粋。

まず、Google maps API を使用するために、script を呼び出す。

 <script src="http://maps.google.com/maps?file=api&v=1&key=xxxxxxxxxxxxxxxx" type="text/javascript" charset="utf-8"></script>

スタイルシートで #map の設定を行う。

 #map {
   border : 1px solid #999999;
   width : 100%;
   height : 500px;
 }

以下、適当に作ったサンプル

 <script type="text/javascript">
 
 //ブラウザが Google maps を使えるか判定
 if (GBrowserIsCompatible()) {
 
    // マーカーをドラッグ可能に設定
    var gmarkeroptions = new Object();
    gmarkeroptions.draggable = true;
 
    // マーカーを作成
    var first_point = new GLatLng(36.033333, 139.15);
    var marker = new GMarker(first_point, gmarkeroptions);
 
    // マップを作成
    var map = new GMap2(document.getElementById("map"));
 
    // それぞれ部品を設置
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
 
    // 表示位置と縮尺を設定
    map.setCenter(first_point, 6);
 
    // infowindow が表示された時には、非表示にして緯度経度を表示
    GEvent.addListener(map, 'infowindowopen', function(overlay, point) {
        map.closeInfoWindow();
        display_station();
    });
 
    // マウスクリック時にはマーカーをその場所に設置して、緯度経度を表示
    GEvent.addListener(map, 'click', function(overlay, point) {
        marker.setPoint(new GLatLng(point.y, point.x));
        map.addOverlay(marker); 
        display_station(point);
    });
 
    // マーカーがドラッグされた時には、ドラッグ完了時に緯度経度を表示
    GEvent.addListener(marker, 'dragend', function(point) {
        display_station(point);
    });
 
    // 緯度経度表示関数
    function display_station(point) {
        if (!point) {
            point = map.getCenter();
        }
        document.getElementById("xxx").innerHTML = point.x;
        document.getElementById("yyy").innerHTML = point.y;
    }
 }
 </script>

マップを表示したい箇所に以下を挿入

 
 <div id="map"></div>

LocalSearch

Google maps 上にローカル検索コントロールと呼ばれる、検索部品を設置することができます。
LocalSearch を使うのであれば、以下の script とスタイルシートを呼び出します。

 <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=xxxxxxxxxxxxxxxx" type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
 <style type="text/css">
  @import url("http://www.google.com/uds/css/gsearch.css");
  @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
 </style>

さらに、map オブジェクトに LocalSearch オブジェクトを追加します。

 map.addControl(new google.maps.LocalSearch());

その他

マップ上のマウスカーソルを変更する時には、以下のような感じでスタイルシートで設定すると変更できます。

 div#map img {
   cursor: default;
 }