dev.google – ソフトウェアエンジニアの技術ブログ

DeveloperToolからCSSセレクタを取得する方法

devtoolのelementタブで、対象のタグ上で右クリックして、copy -> copy selector

例えば、インスタ(https://www.instagram.com/)のfacebook buttonの場合だと、
#react-root > section > main > article > div.rgFsT > div:nth-child(1) > div > form > span > button

なるほど、これは便利 & 実用的かも。

Google Tag Managerを使ってみる

登録していきます

下記のような文言が出ます。
このコードは、次のようにページの内のなるべく上のほうに貼り付けてください。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P35PM9X');</script>
<!-- End Google Tag Manager -->

また、開始タグの直後にこのコードを次のように貼り付けてください。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P35PM9X"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

早速入れてみましょう。
よくわからん。

Google Map : RefererNotAllowedMapError

vagrantでは表示されるのに、本番環境で、google map apiが表示されない！？
dev toolのconsoleを見ると、

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized

Google Maps Geocoding API
Google Maps JavaScript API
どうやら、js側ではなく、geocodingを有効化しないといけなかったようです。
Google Cloud Platformでgeocodingを有効化し、httpリファラーを設定して数分経ったら、本番環境でも表示されるようになりました。

http://phone-search.online/?p=0526130480

お店のカテゴリごとにアイコンを変えてぐるなびapiとgoogle mapを繋げようとしたが…

これは駄目だ。。本家(google)に勝てない。あかんわ。

<?php

$uri = "http://api.gnavi.co.jp/RestSearchAPI/20150630/";
$acckey = "donot watch";
$format="json";

$lat   = 35.6952455;
$lon   = 139.704177;
$range = 2;

$url  = sprintf("%s%s%s%s%s%s%s%s%s%s%s%s", $uri, "?format=", $format, "&keyid=", $acckey, "&latitude=", $lat,"&longitude=",$lon,"&range=",$range,"&hit_per_page=100");

// print_r($url);

$json = file_get_contents($url);
$obj  = json_decode($json);

foreach($obj->rest as $value){
	$name[] = $value->name;
	$cate[] = $value->category;
	$glat[] = $value->latitude;
	$glng[] = $value->longitude;
	$gurl[] = $value->url;

}
// print_r('<pre>');
// var_dump($obj);
// print_r('</pre>');
$glat = json_encode($glat);
$glng = json_encode($glng);
$shop = json_encode($name);
$cate = json_encode($cate);
$url = json_encode($gurl);

?>
<style>
#ginza {
		height: 70%;
		width: 100%;
        font-size:small;
	}
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
</style>
繁華街<br>
新宿　歌舞伎町　風鈴会館周辺
<div id="ginza"></div>
<script>
var map;
var marker = [];
var infoWindow = [];
var icon00 = 'img/00.png';var icon01 = 'img/01.png';var icon02 = 'img/02.png';var icon03 = 'img/03.png';var icon04 = 'img/04.png';var icon05 = 'img/05.png';var icon06 = 'img/06.png';var icon07 = 'img/07.png';var icon08 = 'img/08.png';var icon09 = 'img/09.png';var icon10 = 'img/10.png';var icon11 = 'img/11.png';var icon12 = 'img/12.png';var icon13 = 'img/13.png';var icon14 = 'img/14.png';var icon15 = 'img/15.png';var icon16 = 'img/16.png';var icon17 = 'img/17.png';var icon18 = 'img/18.png';var icon19 = 'img/19.png';var icon20 = 'img/20.png';var icon21 = 'img/21.png';


function initMap(){
    var mapLatLng = new google.maps.LatLng({ lat: <?php echo $lat; ?>, lng: <?php echo $lon; ?>});
    map = new google.maps.Map(document.getElementById('ginza'),{
        center: mapLatLng,
        zoom: 19
    });

    var lat_array = JSON.parse('<?php echo $glat; ?>');
    var lng_array = JSON.parse('<?php echo $glng; ?>');
    var shop = JSON.parse('<?php echo $shop; ?>');
    var cate = JSON.parse('<?php echo $cate; ?>');
    var url = JSON.parse('<?php echo $url; ?>');
    console.log(lng_array);

    for(var i=0; i < 101; i++){
        markerLatLng = new google.maps.LatLng({lat: Number(lat_array&#91;i&#93;), lng: Number(lng_array&#91;i&#93;)});
        marker&#91;i&#93; = new google.maps.Marker({
            position: markerLatLng,
            label: shop&#91;i&#93;, 
            map: map
        });

        infoWindow&#91;i&#93; = new google.maps.InfoWindow({
            content: '<a href="' + url&#91;i&#93;+ '">' + shop[i] + '</a>'
        });

        switch (cate[i]){
           case '居酒屋':case'日本酒バー':case'晩酌居酒屋':case'和食寿司居酒屋/酒場':marker[i].setOptions({icon: {url: icon00}});break;
           case 'カフェ':marker[i].setOptions({icon: {url: icon01}});break;
           case 'バー':case'ワイン':case'パワーストーンバー':case'ダイニングバー':case'大人の隠れ家バー':case'カフェダイニング　バー':case'シャンパン・ワイン':marker[i].setOptions({icon: {url: icon02}});break;
           case 'そば':marker[i].setOptions({icon: {url: icon03}});break;
           case 'ラーメン':marker[i].setOptions({icon: {url: icon04}});break;
           case '日本料理':case'創作料理':case'旬の串揚げ・和食':case'小料理':case'鮨 和食':case'鮨 和食':marker[i].setOptions({icon: {url: icon05}});break;
           case '寿司':case'寿司屋':marker[i].setOptions({icon: {url: icon06}});break;
           case '天ぷら':marker[i].setOptions({icon: {url: icon07}});break;
           case '海鮮料理':marker[i].setOptions({icon: {url: icon08}});break;
           case 'おでん':case'焼鳥　鶏料理':case'焼き鳥':marker[i].setOptions({icon: {url: icon09}});break;
           case 'お好み焼き':marker[i].setOptions({icon: {url: icon10}});break;
           case 'カレー':marker[i].setOptions({icon: {url: icon11}});break;
           case 'イタリアン':case'薪焼きイタリアン':marker[i].setOptions({icon: {url: icon12}});break;
           case '中華料理':marker[i].setOptions({icon: {url: icon13}});break;
           case 'タイ料理':case'ベトナム料理':case'ネパール料理':marker[i].setOptions({icon: {url: icon14}});break;
           case 'フレンチ':case'ビストロ':case'ワインビストロ':case'フレンチ ビストロ':case'鉄板焼きダイニング':case'フレンチレストラン':marker[i].setOptions({icon: {url: icon15}});break;
           case '焼肉':case'野菜×鉄板焼き':case'ホルモン':case'鉄板鍋・牛タン・ワイン':marker[i].setOptions({icon: {url: icon16}});break;
           case 'ハンバーガー':marker[i].setOptions({icon: {url: icon17}});break;
           case 'デザート':case'和菓子':case'パンケーキカフェ':marker[i].setOptions({icon: {url: icon18}});break;
           default:marker[i].setOptions({icon: {url: icon19}});break;
        }
        markerEvent(i);
    }
    
}
function markerEvent(i){
    marker[i].addListener('click', function(){
        infoWindow[i].open(map, marker[i]);
    });
}
</script>

銀座三越周辺のお店

phpからjavascriptに配列を渡します。

var lat_array = JSON.parse('<?php echo $lat; ?>');
var lng_array = JSON.parse('<?php echo $lng; ?>');
console.log(lng_array);

条件分岐でgoogle mapのiconを変える

コンサル会社で、外資系のコンサルだけアイコンを変えてみます。
アイコンはsetOptionで変えます。
setOptions({
icon: {
url: icon
}
});

var map;
var marker = [];
var infoWindow = [];
var icon = 'icon.png';
var markerData = [
  {
       name: 'マッキンゼー',
       ref: '外資',
       lat: 35.6636921,
    lng: 139.7418055
 }, {
        name: 'ベイン',
        ref: '外資',
     lat: 35.6661276,
        lng: 139.7312397
 }, {
        name: 'アビーム',
        ref: '外資',
     lat: 35.6844514,
      lng: 139.764942
 }, {
        name: 'ボスコン',
        ref: '外資',
        lat: 35.6811759,
        lng: 139.734872
 }, {
        name: '野村総研',
        ref: '国内',

     lat: 35.6884676,
     lng: 139.7645002
 }, {
        name: 'MUFJリサーチ',
        ref: '国内',
       lat: 35.6618341,
     lng: 139.7443247
 }
];

function initMap(){
    var mapLatLng = new google.maps.LatLng({ lat: markerData[0]['lat'], lng: markerData[0]['lng']});
    map = new google.maps.Map(document.getElementById('sample'),{
        center: mapLatLng,
        zoom: 14
    });

    for(var i=0; i < markerData.length; i++){
        markerLatLng = new google.maps.LatLng({lat: markerData&#91;i&#93;&#91;'lat'&#93;, lng: markerData&#91;i&#93;&#91;'lng'&#93;});
        marker&#91;i&#93; = new google.maps.Marker({
            position: markerLatLng,
            map: map
        });

        infoWindow&#91;i&#93; = new google.maps.InfoWindow({
            content: '<div class="sample">' + markerData[i]['name'] + '</div>'
        });

        if(markerData[i]['ref'] == '外資'){
            marker[i].setOptions({
                icon: {
                    url: icon
                }
            });
        }
        markerEvent(i);
    }
    
}

function markerEvent(i){
    marker[i].addListener('click', function(){
        infoWindow[i].open(map, marker[i]);
    });
}

なるほど、大分わかってきましたね。

位置情報

読み取り専用のNavigator.geolocationは、ウェブコンテンツがデバイスの位置情報にアクセスするためのGeolocationオブジェクトを返す。


<!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>


      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 2
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }
    </script>
  	<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
</body>
</html>

一通り終わったと思ったらこれか？
なるほど、navigator.geolocation.getCurrentPositionで位置情報を取得していますね。

<script>

var options = {
	enableHighAccuracy : true,
	timeout: 5000,
	maximumAge: 0
};

function success(pos){
	var crd = pos.coords;

	console.log('your current position is:');
	console.log('latitude : ' + crd.latitude);
	console.log('longitude: ' + crd.longitude);
	console.log('More or less ' + crd.accuracy + ' meters');
};

function error(err){
	console.warn('ERROR(' + err.code + '):' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);
</script>

heatmap

つくってる人凄すぎてコーディングが嫌になるな。。


<!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);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        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;);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
      // // 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=hoge&libraries=visualization&callback=initMap">
</script>
</body>
</html>

データの可視化


<!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に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>