reCAPTCHA for MW WP Formプラグインでバッジが表示されない原因と解決法
reCAPTCHA for MW WP Formプラグインでバッジが表示されない原因と解決法 2022年2月26日 Web系, WordPress WordPress, プラグイン suckamon 先日依頼を受けたWordPressの案件で、MW WP Formプラグインで構築した問い合わせフォームに「reCAPTCHA v3」を導入することがあった。 MW WP FormプラグインはデフォルトでreCAPTCHAに対応していないのだが、少し調べるとreCAPTCHA for MW WP Formというプラグインを使うことで簡単に導入できるという情報がいくつも出てきたので、早速インストールしてみることに。 導入手順はそこら中の記事で紹介されているとおり簡単なものなのでここでは割愛するが、手順を踏んで設定をおこなったのだが、reCAPTCHAのバッジ（画面右下に表示されるもの）が表示されな
複数のマーカーが地図内に全て表示されるようにする
複数のマーカーが地図内に全て表示されるようにするには、マーカーの緯度経度で最大と最小のものを求めます。求めた緯度経度を元にmapオブジェクトのfitBounds()メソッドで表示調整を行います。自動的に緯度経度だけでなくズームレベルも調整されます。 Google API Expertが解説する Google Maps APIプログラミングガイド。Google Maps API Expertが最新のGoogle Maps API等について解説しています。 【アマゾンで購入する】 サンプルコード [実行] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title> <link
Google maps APIで地図内に「マーカーと吹き出し」や「画像とリンク」を設置する | Free Style
近頃のWebサイト（ホームページ）には、YouTubeやらGoogle Mapやらいろいろ連動して表示させていることが多いのですが、最近Google Mapを使ってあんなことやこんなことしたいというお話しがあったので何かできるかなと。 Google MapだとAPIかなぁて思って、ちょいとAPIを使って地図内でいろいろやってみました。 マーカーをつけて吹き出しをだして、画像を表示してついでにリンクを付けてと。 Google Maps APIを使うといろんなことができそうなので、使い方をご紹介したいと思います。 ここからは実装のメモです。 Google Maps APIの読み込み Googleが提供しているGoogle Maps JavaScript APIというものをつかうのですが、APIキーが必要になります。GoogleMaps v3から2016年6月22日まではAPIキーが無くても使え
常にインフォウィンドウを1つだけ表示する方法／Google Maps JavaScript API V3 | WordPressにGoogle Maps API V3！
◆インフォウィンドウを1つだけ表示する方法 Google Maps API ｖ3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。 XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。 別のXMLファイルに記述したデータ読み込み 700マーカー以上を表示させてみた。 しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。 アイコン（マーカー）の種類を変更するサンプル え～。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。 良くわからんので、Googleのサンプルを探してたらありました
GoogleマップがAPI必須になってACFをごにょるの巻
クッソ久しぶりに開発話です。 先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。 今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。 ACF – Advanced Custom Fields Advanced Custom Fieldsの使い方 / KoToRi Blog このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずか
日本からアメリカのGoogle (google.com) で英語で検索する方法
[レベル: 中級] この記事では、日本からでも、google.com（米Google） を使って英語表示で検索する方法を説明します。 もし仕組みの説明には興味がなければ、下をブラウザにブックマークしてください。 https://www.google.com/?gl=us&hl=en&gws_rd=cr&pws=0 このURLにアクセスすれば、日本にいても Google.com で英語表示で検索できます。 このURLが意味することに興味があれば解説を読み進めてください。 リダイレクト&日本語を強制される 2、3年前から、米国以外ではgoogle.comで英語の検索をすることが難しくなりました。 まず、www.google.com にアクセスすると初回は www.google.co.jp に強制的にリダイレクトされます。 ページの右下に「Google.com を使用」というリンクがあるのでクリ
Google Mapsを利用する場合はAPIキーが必須になったもようです
Google Mapsは、ver3(現在のバージョン)は「APIキーが必要」ですが APIキーが無くてもサイトに地図は表示されていました。 それが、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」になりました。 APIキーが無いと上記の画像のようにマップ部分が エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。 となります。 ブラウザのコンソールではこんなエラーが表示されます。 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-err
google.loadのjsapiでjQueryの読み込みはダメ
最新のjQueryが読み込めない google.loadのjsapiでjQueryを読み込めるのはバージョン1.7.1までとなっており、そのあとにリリースされたバージョンのjQueryは読み込むことはできない。 例えば下記のようにgoogle.load("jquery", 1)と記述した場合は2014年7月時点で最新の1.11.1ではなく1.7.1を読み込んでしまう。 <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", 1);</script> google.load("jquery", 1.8)などと1.8以降のバージョンを指定した場合はjQuery自体を読み込むことができない。 jQueryを読み込む場合はajax.googleapis.comから読み込む。 <script
1ページに複数のGoogle mapを表示 - Qiita
<!doctype html> <html> <head> <meta charset="utf-8"> <title>1ページに複数のGoogle mapを表示</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map_canvas_01"></div> <div id="map_canvas_02"></div> <div id="map_canvas_03"></div> <script type="text/javascript"> (function(){ var latlng = new google.maps.LatLng(34.687298, 135.526226
レスポンシブ対応、Googleマップの中心にピンを表示するテクニック -the new code
Googleマップをレスポンシブ対応にするのは、簡単です。embedのコードから高さと幅を削除して、ラッパーを用意するだけです。しかし、クリティカルな問題が一つあります。サイズを水平方向に変更した際に、地図の端が切断されてしまいます。 Googleマップの中心にピンを表示し、且つレスポンシブ対応にするテクニックを紹介します。 Create An Auto-Centered Responsive Google Map 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 デモ 実装 デモ デモでは、デスクトップでも、タブレットでも、スマホでも、そしてコンテンツのサイズを変更しても、Googleマップの中心にピンが表示されています。
あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT by Beeworks
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
iOSでgoogle mapsのweb版にアクセスすると「ページを開けません」エラーになる – shuusetuのブログ
表題の事象が下記の端末で発生 docomo iPhone 5S iOS 7.1.1 docomo iPhone 6+ iOS 8.1 au iPhone5 iOS8.1 au iPhone5S iOS8.0 SB iPhone4S iOS7.1.1 上記のiPhone、iOSのバージョンで運営サイトからリンクを踏んでweb版のgoogle mapsにアクセスした際に「ページを開けません。アドレスが無効です。」とアラートが表示され、リダイレクトでアクセス元のページに戻ってします。 パラメータを削って確認などを行ってみたが、パラメータの「q=xxx」がついていると発生するようだ。 しかし、パラメータqはピンを刺したり名称を表示する際には必須のパラメータだ。 が、どうも直接の原因はそこではなさそう。 試しにリファラーをきるオプションをタグに設定してみるとビンゴ。 具体的にはタグに「rel=nor
Google MapsのマーカーをRetinaディスプレイにサクッと対応させる - Qiita
Google Mapsのマーカー、Retinaディスプレイでそのままだと画像がボケちゃうのでその対策。 とは言えやることは、大きいサイズの画像を読み込む→縮小して表示させるといういつもの手順。でもまぁもう一度英文読むのとかイヤなので、マップ周りのコードごとまとめてストックしとこうそうしよう。 var myLatlng = new google.maps.LatLng(34.687571, 135.526239); function initialize() { var mapOptions = { zoom : 17, center : myLatlng }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var image = { url : 'icon.png', scaledSiz
Google AdSense 広告のフォーマット
ページに最も合った、高い成果が見込める広告サイズを選ぶ際の参考として、以下の表を用意しました。 高い成果が見込める広告サイズ サポートされているその他の広告サイズ 地域限定の広告サイズ 高い成果が見込める広告サイズ 広告サイズ 説明 テキスト広告 ディスプレイ広告 モバイル テキスト広告とディスプレイ広告*
Googleマップのカスタマイズに挑戦してみた！
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to check if the user has already checked Google Recaptcha checkbox
Google API - Google Map APIで中心位置をfitBoundsで取得したい(115928)｜teratail
Snazzy Maps - Free Styles for Google Maps
Styling Wizard: Google Maps APIs
Responsive Map