Google Maps スクロールに関するカスタマイズ

スワイプ時に、Google Mapsを意図せず操作してしまってページのスクロールが先へ進まずに困る…。
これが解消されたのは、まだ記憶に新しいところ。

スマホ閲覧時のGoogle Mapsが使いやすくなった!

スワイプ中の指がGoogle Mapsに触れると、「地図を移動させるには指2本で操作します」と地図上に表示され、地図が意図しない挙動(地図がスクロールするなど)をしないようになりました。

20170116_img

2016年11月25日 Google Cloud Japan 公式ブログで、Google Maps APIの仕様変更に関する記事が紹介されています。

米国時間 11 月 15 日、Google はマップを埋め込んでいるサイト向けに、直感的なスクロール操作が行える機能を導入し、モバイル デバイス上でフルスクリーン コントロールをデフォルトで表示するようにしました。これにより、ユーザーはモバイル ブラウザ上でのマップ操作をより直感的に行え、フラストレーションを感じることも少なくなるはずです。

【参考】
▼Google Maps API 新機能:スマートなスクロール機能をモバイル ウェブ マップに導入
https://cloud-ja.googleblog.com/2016/11/google-maps-api_25.html

 

この嬉しい仕様変更は、Google Maps JavaScript API に「gestureHandling」というオプションが新たに追加されたことによるもの。

今まで大問題ではないけれど、少しやりづらかった部分が解消されましたね。
個人的にもスマホで閲覧中、Google Mapsがでてくると無意識に画面の端をスワイプする癖がついてました。

ここまではいいのですが、じゃあ、

パソコン閲覧時のGoogle Mapsは?

と、思いました。

パソコンで見るGoogle Mapsはどうなの?

パソコンで見るGoogle Mapsも、スクロール中にGoogle Mapsにさしかかると意図せず地図が拡大され、とても煩わしいですよね。
解決方法は既にいくつかあり、

  • Google Maps API を使う(このサイト内の関連ページへ
    var myOptionsの項目で
    scrollwheel: false /*ページスクロール中のマウスに反応させない*/を追記すればOK
  • iframeの場合は、style="pointer-events:none;" を使う
    ※これは地図がそもそも動かなくなるのでNG
  • iframeの場合、一度クリックすれば地図が操作できるようにjQueryでカスタマイズ

といった選択肢があります。
パソコン閲覧時の場合、スマホ閲覧時ほどの困り感はないですが、
かゆい所に手が届くカスタマイズではないでしょうか。

 

【参考サイト様】
http://itstudio.co/2016/05/31/5802/
http://blog.ddwnet.com/archives/1213.html

 

おすすめ記事

 

Google Maps API で地図をカスタマイズしてみる 2016 → 2017

Webサイト制作では必ずと言ってよいほどお世話になっている「Google Maps」。
ディレクションにまわるようになってからは直接コードを触る機会も少なく、カスタマイズも未経験のままだったので、ここでひとつ勉強のためにやってみようと思い立ちました。
2016年6月と10月に仕様変更がされているため、Web上の情報には古い(仕様変更前の情報)ものが多く悩みながらの実装となりました。

古い情報で実装して一旦失敗、その後新しい手法で実装成功、の流れで記載していきますのでお急ぎの方は「APIキーが必要」からご覧ください!

Google Maps API で地図をオリジナルにカスタマイズ!

【1】Google Maps APIをhead内で読み込む

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

…と書くだけです。
※後ほどのべますが、これだと地図が表示されず困ることになります。

【2】bodyタグにonloadを記述

<body onload="initialize();">

【3】地図を埋めたい場所に指定のコードを記述

※jsは適宜外部ファイル化してください

<script>
function initialize() {
  var latlng = new google.maps.LatLng(43.0685834,141.348829);/*表示したい場所の経度、緯度*/
  var myOptions = {
    zoom: 15, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('gmap_ct'), myOptions);
/*スタイルのカスタマイズ*/
 var styleOptions =
[
 {
 "featureType": "landscape.natural",
 "stylers": [
 { "color": "#90c892" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "gamma": 2.61 },
 { "color": "#ffffff" }
 ]
 },{
 "featureType": "transit.line",
 "stylers": [
 { "invert_lightness": true },
 { "visibility": "simplified" },
 { "color": "#ffbe00" }
 ]
 },{
 "elementType": "labels.icon",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape.man_made",
 "elementType": "geometry",
 "stylers": [
 { "visibility": "simplified" },
 { "color": "#ffce5f" }
 ]
 },{
 "featureType": "poi",
 "elementType": "geometry",
 "stylers": [
 { "color": "#ffde5b" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "color": "#dfe8ff" }
 ]
 },{
 "featureType": "transit.station",
 "elementType": "geometry",
 "stylers": [
 { "color": "#fab022" }
 ]
 }
];
 
 var styledMapOptions = { name: 'あーと・とー' }
 var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('sample', sampleType);
 map.setMapTypeId('sample');
 
/*オリジナルアイコンの取得*/
var icon = new google.maps.MarkerImage('/xxxxxx.png',/*アイコンの場所*/
 new google.maps.Size(44,44),/*アイコンのサイズ*/
 new google.maps.Point(0,0)/*アイコンの位置*/
);
 
/*マーカーの設置*/
var markerOptions = {
 position: latlng,/*表示場所と同じ位置に設置*/
 map: map,
 icon: icon,
 title: 'ここです'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);
 
}
</script>
<div id="gmap_ct" style="width:100%;height:640px;"></div>

※ソースコードは参考サイト様より
※色に関するカスタマイズは奥が深いので、今回は解説省略です。
スタイル化されたマップ |Google Maps JavaScript APIをご参照ください。

…さて、これでまずは地図が表示されるはず、だったのですが。。。

スクリーンショット 2017-01-15 1.39.13

エラーが発生してしまいましたね。

APIキーが必要

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。
参考サイト様

APIキーが必要…といわれても、特に取得せずとも表示されているサイトもあるよ?
と思っていたら、2016年の6月22日から仕様が変更された模様。
それ以前のものは、APIキーなしで表示されているという事のようです。

では早速、APIキーを取得していきましょう。

1)ウェブ向け Google Maps API へアクセス。

スクリーンショット 2017-01-15 2.01.382)画面右上のキーを取得ボタンをクリック。Google Maps ウェブ API をアクティベートする、のウィンドウが出たら、右下の「続ける」をクリックします。

3)Google APIs に移動しました。画面の指示に従い進みます。
スクリーンショット 2017-01-15 2.08.564)Keyに任意の名称をつけて、進みます。
スクリーンショット 2017-01-15 2.12.502017-01-15-2.16.535)取得した「キー」をhead内で読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxx"></script>

6)「エラーが発生しました」と表示されていた場所に、無事GoogleMapが表示されました!
スクリーンショット 2017-01-15 2.26.16

Google Maps API 無償版には制限がある

Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります。

1.APIの使用が25,000回/日を超えた場合、以後エラーとなり地図が表示されない。

2.Google Maps APIが古いバージョンの場合、エラーとなり地図が表示されない。

参考サイト様より

…ということで、今まで使っていたものが使えなくなる場合があるのですね。
こちらの仕様についても要注意です。

おすすめ記事

 

ビジュアルリッチエディタが表示されない!

ビジュアルリッチエディタが表示されない。
ちなみにビジュアルリッチエディタというのは、 管理画面の本文を入力するエリアの「ビジュアルタブ」がONになっている状態のことを指します。

 

【ビジュアルリッチエディタの正常な状態 ↓ 】

ビジュアルリッチエディタ

これがなぜか表示されず、「HTMLタブ」だけだったり、

【HTMLタブだけ ↓ 】

HTMLタブしか表示されない状態

「ビジュアルタブ」も「HTMLタブ」もおかしかったり、

【両方おかしい ↓ 】

不具合が起きることは、わりとあります。 私が出会った事例と解決策を書いてみたいと思います。

HTMLタブだけ の場合

これは不具合ではなく設定の可能性が大です。 管理画面の「ユーザー」→「あなたのプロフィール」の設定画面に「ビジュアルリッチエディターを使用しない」というチェック項目があるのです…。

あなたのプロフィール設定画面

なんですかこれは…。ビジュアルリッチエディターがないほうが良いシチュエーションもあるのでしょうか。あまり使わないような気が(個人的に)。

これ、気づかずに30分くらい悩みました。 知らないって怖いですね。

両方おかしい場合

「ビジュアルタブ」も「HTMLタブ」も表示がおかしい。各種ボタンが表示されない。編集エリア内に文字を打ち込めているのかどうか見えない…。

かなりあせる状態です。

結論からいうと、「wp-includes」ディレクトリ内の「js」ディレクトリ内にある「tinymce」あたりが原因です。cdWordPressの本家サイトから新たにダウンロードし直して、この「tinymce」フォルダだけまるごと入れ替えてしまいましょう。

この不具合は、別の場所で一度構築したWordPressを使った場合に頻発します。 別環境で一度構築したものを本番で流用した、あるいはサーバ間の移行をした場合など。

 

時間がない時に不具合で足止めされるなんて、なんとしても避けたいところです。

 

人気記事

is_home()とis_front_page()の違いって何?

ずっと謎だったので検証してみました。
「表示設定」で「フロントページの表示」をどう設定しているかによって
is_home()が機能したり、is_front_page()が機能したり、また両方機能したりします。
結果は…

is_front_page()とis_home()の両方機能

is_front_page()が機能

固定ページ>フロントページ

is_home()が機能

固定ページ>投稿ページ

 

is_home()の存在理由となっているのがこの「固定ページ」の「投稿ページ」です。何ですかこれは…。

どうやら「ブログのトップページ」ということらしいのですが、非常に理解しづらかったです。フォーラムでも熱いやりとりが交わされています

私の場合、「ブログのトップページ」は、ブログとして使うカテゴリのアーカイブページを利用するので、個人的にはいらない機能です。唯一、意味があるとすればwp_list_pages()で「ブログのトップページ」が吐き出せることでしょうか。

謎は残りますが、is_home()とis_front_page()がそれぞれどういうときに機能するのかがわかり、一応すっきりしました。

なんだか気になったのでさらに検証してみました。

関連記事