例－５０：ふきだしに投票機能をつける

マーカーをクリックすると、投票機能がついた「ふきだし」が表示されます。
投票するとサーバー側(PHP)に送信されてカウントされます。

map_example_50.html

<!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 setVoteCnt (div, cnt) {
      div.innerHTML = "投票数：" + cnt;
    }

    //情報ウィンドウの作成 
    function createVoteMarker(latlng, name, voteCnt) {
      //マーカーを作成
      var marker = new GMarker(latlng); 
      
      var container = document.createElement("div");
      
      //説明用Div
      var descDiv = document.createElement("div");
      descDiv.innerHTML = name;
      container.appendChild(descDiv);
      
      //投票数表示用Div
      var voteDiv = document.createElement("div");
      setVoteCnt(voteDiv, voteCnt);
      container.appendChild(voteDiv);
      
      //投票ボタン
      var voteBtn = document.createElement("input");
      voteBtn.type = "button";
      voteBtn.value = "投票する";
      container.appendChild(voteBtn);
      
      //投票機能
      GEvent.addDomListener(voteBtn, "click", function () {
        
        //カウントアップ
        voteCnt++;
        
        //POST形式でデータを送信し、結果が返ってきたらメッセージを表示
        GDownloadUrl("./map_example_50.php", function(data, responseCode) {
          //表示用Divを更新
          setVoteCnt(voteDiv, voteCnt);
          
          //メッセージ
          alert(data);
        }, "mode=post&name=" + encodeURI(name) + "&t=" + new Date().getTime());
      });
      
      //マーカーがクリックされたら情報ウィンドウを開く
      marker.bindInfoWindow(container);
      
      return marker;
    }

    function load(){ 
      //地図表示
      var map = new GMap2( document.getElementById("map"));
      var centerPos = new GLatLng(35.6984,139.7732); 
      map.setCenter(centerPos, 10);
      
      //マーカーの位置をXML形式でロード & マーカーの追加
      GDownloadUrl("./map_example_50.php?mode=get&t=" + new Date().getTime(),
        function(data, responseCode) {
          var xmlDoc = GXml.parse(data);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
          for (var i = 0; i < markers.length; i++) { 
            var mpoint = new GLatLng( 
              Number(markers[i].getElementsByTagName("lat")[0].firstChild.nodeValue), 
              Number(markers[i].getElementsByTagName("lng")[0].firstChild.nodeValue)
            ); 
            var voteCnt = Number(markers[i].getElementsByTagName("vote")[0].firstChild.nodeValue);
            var name = markers[i].getElementsByTagName("name")[0].firstChild.nodeValue;
            var marker = createVoteMarker(mpoint, name, voteCnt); 
            map.addOverlay(marker);
          } 
        }
      );
      
    } 
    //ページがロードされたら、load 関数を実行して、地図を表示する
    window.onload = load;
    
    //ページを抜けるとき、メモリ開放
    window.onunload = GUnload;
    //]]>
    </script>
  </head>
  <body >
    <div id="map" style="width: 600px; height: 600px"></div>
  </body>
</html>

map_example_50.php

<?php
  if (@$_REQUEST["mode"] == "post") {
    $voteCnt = @$_REQUEST["vote"];
    $name = @$_REQUEST["name"];
    
    $simplexml = simplexml_load_file('map_example_50.xml');
    $markers = $simplexml->marker;
    foreach ($markers as $marker) {
      if ($marker->name == $name) {
        $marker->vote = (int) $marker->vote + 1;
      }
    }
    file_put_contents("map_example_50.xml", $simplexml->asXML());
    echo "Thanks for your vote.";
  } else {
    echo file_get_contents('map_example_50.xml'); 
  }
?>

map_example_50.xml

<?xml version="1.0" encoding="utf-8" ?>
<markers>
	<marker>
		<lat>35.6984</lat>
		<lng>139.7732</lng>
		<name>マーカー1</name>
		<vote>1</vote>
	</marker>

	<marker>
		<lat>35.5984</lat>
		<lng>139.7732</lng>
		<name>マーカー2</name>
		<vote>1</vote>
	</marker>

	<marker>
		<lat>35.7984</lat>
		<lng>139.7732</lng>
		<name>マーカー3</name>
		<vote>1</vote>
	</marker>
</markers>