ソフトウェアエンジニアの技術ブログ：Software engineer tech blog – Page 475 – 随机应变 ABCD: Always Be Coding and … : хороший

InfoWindow.setContent()

InfoWindow.setContent()はInfoWindowクラスのメソッド

infoWindowはそのままですが、情報ウィンドウ

var infoWindow = new google.maps.InfoWindow({
	position: new google.maps.LatLng( 35.708194, 139.808565 ) ,
	content: "SYNCER" ,
});

infoWindow.open(map);

infoWindow.setContent("Hello!!");

open: 新しい副ブラウザウィンドウを生成し、参照されているリソースをロード
var win = window.open(url, name)
失敗した場合、var winはnull

var win;
var features = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
{
  win = window.open("http://www.cnn.com/", "cnn", features);
}

window.XMLHttpRequest

XMLHttpRequestはサーバーに対してHTTPリクエストを発行するオブジェクト。ブラウザを更新しない。

firefox, operaの場合は、単にXMLHttpRequestクラスのオブジェクトを作るだけだが、IE6はActiveXObjectとして作成しなければならない。

ActiveXObject :
オートメーションオブジェクトへの参照を有効にして返します。
newObj = new ActiveXObject(servername.typename[, location])

ActiveXのXMLHTTPのバージョン: Msxml2.XMLHTTP, Microsoft.XMLHTTP
new ActiveXObject(‘Msxml2.XMLHTTP’);
new ActiveXObject(‘Microsoft.XMLHTTP’);

「readyState」プロパティはサーバからデータを受信するたびに値の更新が行われます。よってこの値を監視することでデータの受信が完了したかどうかを判別できます。
「readyState」プロパティの値が変化すると「onreadystatechange」イベントが発生します。そこで「onreadystatechange」イベント発生する度にチェックする関数を呼び出し、データの受信が完了していたらデータを表示する。
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}

httpRequest = false;
if(window.XMLHttpRequest){
	httpRequest = new XMLHttpReqeust();
	httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject){
	try {
		httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
	} catch(e){
		httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
	}
}

function request(page){
	if(page == "") return;
	httpRequest.abort();
	httpRequest.open('GET', 'http//webos-goodies.jp/archives/' + page+ '.html', true);
	httpRequest.onreadystatechange = function(){
		if(httpRequest.readyState == 4){
			if(httpRequest.status == 200){
				document.getElementById('page_text').value = httpRequest.responseText;
			}
		}
	}
	httpRequest.send(null);
}

responseXML

xmlを取得する

<test>
	<sample>米ドル/円</sample>
	<sample>ユーロ円</sample>
	<sample>豪ドル/円</sample>
</test>

<form>
	<input type="button" name="submit" value="表示" id=button>
</form>
<div id="result"></div>

<script>
function createXMLHttpRequest() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest()
  } else if (window.ActiveXObject) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP")
    } catch (e) {
      try {
        new ActiveXObject("Microsoft.XMLHTTP")
      } catch (e2) {
        return null
      }
    }
  } else {
    return null
  }
}

function send(){
		var url = "sample.xml";
		var request = createXMLHttpRequest();
		request.open("GET", url, true);
		request.onreadystatechange = function(){
			if(request.readyState == 4 && request.status == 200){
				var result = document.getElementById("result");
      			var xml = request.responseXML;
      			var nodes = xml.getElementsByTagName("sample");
      			var text = nodes[0].firstChild.nodeValue;
      			result.innerHTML =text;
			}
		}
		request.send("");

}
window.onload = function(){
	document.getElementById("button").onclick = send;
}
</script>

データの可視化


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 50%;
        margin-top: 10px;
      }
      html, body {
        height: 100%;
        margin: 10px;
        padding: 0;
      }
    </style>
  </head>
  <body>
  	<div id="map"></div>
  	<script>
  	var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

      var script = document.createElement('script');
      script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }


      // // window.eqfeed_callback = function(results) {
      // //   for (var i = 0; i < results.features.length; i++) {
      // //     var coords = results.features&#91;i&#93;.geometry.coordinates;
      // //     var latLng = new google.maps.LatLng(coords&#91;1&#93;,coords&#91;0&#93;);
      // //     var marker = new google.maps.Marker({
      // //       position: latLng,
      // //       map: map
      // //     });
      // //   }
      // }
    </script>
  	<script async defer
src="https://maps.googleapis.com/maps/api/js?key=notwatch&callback=initMap">
</script>
</body>
</html>

google map ROADMAP, SATELLITE, HYBRID, TERRAIN

丹下健三でもみてみましょう。
まず、デフォルトのROADMAP

function initMap(){
      var position = {lat: <?php echo $lat_a; ?>, lng: <?php echo $lng_a; ?>};
  		map = new google.maps.Map(document.getElementById('map'),{
  			center: position,
  			zoom: 14,
        // mapTypeId: 'terrain'
  		});

続いて、satellite
大文字だと表示されません。

次は、hybrid

最後に、terrain

結論は、生で見よう。

document.createElement(‘script’);

bodyにscriptを追加。

var script = document.createElement('script');
script.src = 'http://example.com/hoge.js';
document.body.appendChild(script);

window.はdomを収める

mapTypeId: ‘terrain’　地形情報を使った地図
ROADMAP 道路や建物
SATELITE 衛星写真
HyBRID ROADMAPとSATELITE
TERRAIN 地形情報

デフォルトはROADMAP

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 50%;
        margin-top: 10px;
      }
      html, body {
        height: 100%;
        margin: 10px;
        padding: 0;
      }
    </style>
  </head>
  <body>
  	<div id="map"></div>
  	<script>
  	var map;
  	function initMap(){
  		map = new google.maps.Map(document.getElementById('map'),{
        zoom: 2,
  			center: new google.maps.LatLng(2.8, -187.3),
        mapTypeId: 'terrain'
  		});

      var script = document.createElement('script');
      script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features&#91;i&#93;.geometry.coordinates;
          var latLng = new google.maps.LatLng(coords&#91;1&#93;,coords&#91;0&#93;);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
  	<script async defer
src = "https:maps.googleapis.com/maps/api/js?key=notwatchk&callback=initMap">
</script>
</body>
</html>

住所からGoogle mapに2つのラベルを表示する

なんとなく、それらしいものができてきました。中心のポジションは、緯度経度の平均を取ってます。
あ、array_sum, countでできますね。
$lat_a = array_sum($lat)/count($lat);
$lng_a = array_sum($lng)/count($lng);

<?php

$resutaurant = array(
    "Brasserie de L'institut" => "東京都新宿区市谷船河原町15",
    "Le Mange-Tout" => '東京都新宿区納戸町22'
  );
function urlencode_rfc3986($str){
  return str_replace('%7E','~', rawurlencode($str));
}
$i = 0;
foreach($resutaurant as $name => $address){
  $encode_address = urlencode_rfc3986($address);

  $url = 'http://maps.google.com/maps/api/geocode/json?address='. $encode_address.'&sensor=false';
  $json = file_get_contents($url);
  $obj = json_decode($json,true);

  $lat[] = $obj["results"]["0"]["geometry"]["location"]["lat"];
  $lng[] = $obj["results"]["0"]["geometry"]["location"]["lng"];
  echo $name ." ".$address .'<br>';
  echo $lat[$i] ." " .$lng[$i]. "<br>";
  $rname[] = $name;
  $i++;
}

$lat_a = ($lat[0]+$lat[1])/2;
$lng_a = ($lng[0]+$lng[1])/2;


?>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 50%;
        margin-top: 10px;
      }
      html, body {
        height: 100%;
        margin: 10px;
        padding: 0;
      }
    </style>
  </head>
  <body>
  	<div id="map"></div>
  	<script>
  	var map;
  	function initMap(){
      var position = {lat: <?php echo $lat_a; ?>, lng: <?php echo $lng_a; ?>};
  		map = new google.maps.Map(document.getElementById('map'),{
  			center: position,
  			zoom: 16
  		});

      var labels = ["<?php echo $rname&#91;0&#93;; ?>","<?php echo $rname&#91;1&#93;; ?>"];

      var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i]
          });
        });

      var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }

    var locations = [
    {lat: <?php echo $lat&#91;0&#93;; ?>, lng: <?php echo $lng&#91;0&#93;; ?>},
    {lat: <?php echo $lat&#91;1&#93;; ?>, lng: <?php echo $lng&#91;1&#93;; ?>}
    ]
  	</script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
  	<script async defer
src = "https:maps.googleapis.com/maps/api/js?key=hogehogek&callback=initMap">
</script>
</body>
</html>

住所からlat, lngを抽出して地図を表示

飯田橋のBrasserie de L’institutを表示してみましょう。
住所は、東京都新宿区市谷船河原町15。
google map apiのjsonでlat, lngを取得します。

jsのマップを表すクラスはMap, centerとzoomは必須。
callbackで、apiを読み込んだ後のinitMap()実行を指定しています。

<?php

$name = "Brasserie de L'institut";
$address = '東京都新宿区市谷船河原町15';
function urlencode_rfc3986($str){
  return str_replace('%7E','~', rawurlencode($str));
}
$encode_address = urlencode_rfc3986($address);

$url = 'http://maps.google.com/maps/api/geocode/json?address='. $encode_address.'&sensor=false';
$json = file_get_contents($url);
$obj = json_decode($json,true);

$lat = $obj&#91;"results"&#93;&#91;"0"&#93;&#91;"geometry"&#93;&#91;"location"&#93;&#91;"lat"&#93;;
$lng = $obj&#91;"results"&#93;&#91;"0"&#93;&#91;"geometry"&#93;&#91;"location"&#93;&#91;"lng"&#93;;
echo $name ." ".$address .'<br>';
echo $lat ." " .$lng;

?>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 50%;
        margin-top: 10px;
      }
      html, body {
        height: 100%;
        margin: 10px;
        padding: 0;
      }
    </style>
  </head>
  <body>
  	<div id="map"></div>
  	<script>
  	var map;
  	function initMap(){
  		map = new google.maps.Map(document.getElementById('map'),{
  			center:{lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>},
  			zoom: 16
  		});
  	}
  	</script>
  	<script async defer
src = "https:maps.googleapis.com/maps/api/js?key=hogehoge&callback=initMap">
</script>
</body>
</html>

var markerを追加して、ラベルを付与できる。

　　　var map;
  	function initMap(){
      var position = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
  		map = new google.maps.Map(document.getElementById('map'),{
  			center: position,
  			zoom: 16
  		});
      var marker = new google.maps.Marker({
        position: position,
        map: map
      });
  	}

Javascript async

利用開始とともに、スクリプトは非同期で実行
非順序型実行で、非同期に適している。

<script src="http://hogehoge.com/script.js" async>
</script>