例-2:クリックされた位置にマーカーを追加する

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
            type="text/javascript"></script>


    <script type="text/javascript">
    //<![CDATA[
      function load() {
        if (GBrowserIsCompatible()) {
        
          //地図を作成
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(35.677335,139.744613), 16);
  
          //地図をクリックしたら、マーカーを追加
          GEvent.addListener(map, "click", function(overlay, latlng, overlaylatlng) {
            if (overlay) {
              //overlay が null でないときは、何かしらのオーバーレイがクリックされた
              
              //マーカーかどうか判定する
              //(openInfoWindow を持っていれば、マーカーとみなす)
              if ("openInfoWindow" in overlay) {
                //マーカーなら削除
                map.removeOverlay(overlay);
              }
              
            } else {
              //overlay が null のときは、マーカを追加する
              var m = new GMarker(latlng);
              map.addOverlay(m);
  
              //緯度・経度の表示
              m.openInfoWindowHtml("lat:" + latlng.lat() + "<br>lng:" + latlng.lng());
            }
          });
        }
      }
  
      //ページがロードされたら、load 関数を実行して、地図を表示する
      window.onload = load;
      
      //ページを抜けるとき、メモリ開放
      window.onunload = GUnload;
    //]]>
    </script>

  </head>
  <body >
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>

※ HTMLのDocType宣言は、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> にしてください。
 IE8でクリックした位置がずれる、という現象が解消されます。






サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら