編集できる情報ウィンドウ

.

説明

google.maps.MVCObjectを継承する全てのクラスは、(プロパティ)_changedイベントを発生することが可能です。
この例では、そのイベント(MVCイベントと呼ばれます)の発生する方法と、使い方を説明しています。

<script type='text/javascript'>

  var mapCanvas;
  function initialize() {
    var mapDiv = document.getElementById("map_canvas");
    mapCanvas = new google.maps.Map(mapDiv, {
      center : new google.maps.LatLng(35.676148, 139.74479),
      zoom : 10,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    });
    
    //(1)htmlプロパティに表示するHTMLをセット
    var marker = createEditableMarker({
      position : mapCanvas.getCenter(),
      html : "この情報ウィンドウは編集できます",
      map : mapCanvas
    });
    
    //(13)htmlプロパティが変換すると、html_changedイベントが発生する
    google.maps.event.addListener(marker, "html_changed", function(){
      console.log(this.html);
    });
    
    //マーカーを擬似クリック
    setTimeout(function() {
      google.maps.event.trigger(marker, "click");
    }, 2000);
  }
  
  function createEditableMarker(options) {
    //(2) マーカーを通常通り作成
    //Markerクラスはどんなプロパティでも受け付けるので、HTMLプロパティも保持される
    var marker = new google.maps.Marker(options);
    
    //(3)editingプロパティがtrueになったら、編集中とする
    marker.set("editing", false);
    
    //(4)HTMLを表示するDIVを作成
    var htmlBox = document.createElement("div");
    htmlBox.innerHTML = options.html || "";
    htmlBox.style.width = "300px";
    htmlBox.style.height = "100px";
    
    //(5)HTMLを編集するためのtextareを作成
    var textBox = document.createElement("textarea");
    textBox.innerText = options.html || "";
    textBox.style.width = "300px";
    textBox.style.height = "100px";
    textBox.style.display = "none";
    
    //(6)htmlBox,textBoxを入れるためのdivを作成
    var container = document.createElement("div");
    container.style.position = "relative";
    container.appendChild(htmlBox);
    container.appendChild(textBox);
    
    //(7)編集ボタンの作成
    var editBtn = document.createElement("button");
    editBtn.innerText = "編集";
    container.appendChild(editBtn);
    
    //(8)情報ウィンドウを作成
    var infoWnd = new google.maps.InfoWindow({
      content : container
    });
    
    //(9)マーカーがクリックされたら情報ウィンドウを表示
    google.maps.event.addListener(marker, "click", function() {
      infoWnd.open(marker.getMap(), marker);
    });
    
    //(10)編集ボタンが押されたらモードを切り替える。
    //boolean値を設定しているので、否定すると逆の値になる
    google.maps.event.addDomListener(editBtn, "click", function() {
      marker.set("editing", !marker.editing);
    });
    
    //(11)プロパティが変化すると、(プロパティ名)_changedイベントが発生する
    google.maps.event.addListener(marker, "editing_changed", function(){
      textBox.style.display = this.editing ? "block" : "none";
      htmlBox.style.display = this.editing ? "none" : "block";
    });
    
    //(12)テキストエリアの内容が変化すると change DOMイベントが発生するので、内容をhtmlBoxに反映する
    google.maps.event.addDomListener(textBox, "change", function(){
      htmlBox.innerHTML = textBox.value;
      marker.set("html", textBox.value);
    });
    return marker;
  }
  google.maps.event.addDomListener(window, "load", initialize);
    </script>





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

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