Google検索とmapで表示される営業日の変更

私の方で第三者として新しい営業時間を提案から行えた

お世話になります。

Googleでの本店の休業日の時間表記変更ですが、一応私から水曜日に変更の申請はだしたものの、オーナーではない第三者の申請ですので

Google側に通るかわかりません。ですので、しばらししても変更がなければ、オーナー申請する必要があるかもしれません。googleビジネスプロフィールに登録が必要かもです。

オーナーとして紐づけるgoogleアカウントでgoogleにログインした状態で、

検索バーに　サンエツ本店と入力して、サンエツ富山本店のスクリーンショットの【このビジネスオーナーですか？】から

オーナーとして申請してください。（弊社は第三者となりオーナー確認の際にひっかかるので申請ができません。）

オーナー確認方法の際に、ハガキで確認のものが選べるならはがきの方が楽だと思います。申請後確認コードが記載されたはがきが来るので、それしたがって続けて申請してください。（２週間ほどハガキが来るまでかかります。）

オーナー確認ができたらば、紐づいているgoogleアカウントで再度検索からサンエツ本店と検索して、

Googleが表示提示しているサンエツ本店をクリックして、営業時間箇所のチョボをクリックして新しい営業時間を提案

から変更してみてください。

Google Maps Platform API

https://www.migaro.co.jp/tips/1082/#:~:text=Google%20Maps%20Platform%E3%81%AEAPI,API%E3%81%8C%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

課金対象でなくても、カード情報を登録しておかないとAPIキーは利用できません。

◾️支払い情報を入力

よくあるエラーが、支払い情報（クレジットカード情報）を設定していないケース。

課金対象でなくても、カード情報を登録しておかないとAPIキーは利用できません。

↓こちらは、「支払い方法を登録してくださいねー」っていうエラーの表示。

ちなみに、利用料は従量課金制です。
Googleプラットフォーム料金表（公式）

無料で使える範囲

静的な地図描画だと100,000アクセスまで無料
2点間を検索するルート検索は月間40,000リクエストまで無料

普通の飲食店や美容院、中小企業のホームページ等であれば、無料範囲内で使えるはずです。
心配な場合は、Googleサーチコンソールなどでアクセス数を見てみると参考になります。

複数のピン立てるにはjavascriptが分からんとどうにもならん

仕様ルールについて↓

https://developers.google.com/maps/documentation/javascript?hl=ja

使用制限

https://www.migaro.co.jp/tips/1082/

【初心者用】GoogleマップのAPIキー取得方法｜WordPressで地図が表示されない時の対処法

wordpressの地図プラグイン Leaflet Maps Marker

https://kumaweb-d.com/blog/leafletmapsmarker/

MEO Google ビジネスプロフィール

meoとしてgoogleマップに情報を追加できるGoogleマイビジネスが名称がかわってビジネスプロフィールになった。

これまでヨガ（専務）、自社サイトをマイビジネスに登録したことがあるので、検索サイトで上部に地図共に表示されていた。

GMOがこのシステムをより口コミツールを絡めて売ろうとしている。

https://www.briddi.jp/blog/google-mybusiness/google-business-profile_about

google map 複数のポインタ

自社ページの会社概要のマップはgoogle マイマップ。

https://apptopi.jp/2020/02/22/googlemap-mymap-pin/

google map 有料化

Google MAPS APIが7/16有料化？地図を埋め込んでいるサイトは要確認！

[A] iframeを使って地図から直接埋め込み

iframeが

1	`<iframe` `src="”https://www.google.com/maps/embed?pb={パラメーター}”"></iframe>`

となっている場合は引き続き無料で利用可能です。
今回、サービス移行をする必要もありません。

[B] APIを利用してiframeで地図を埋め込み

iframeが

1	`<iframe` `src="//www.google.com/maps/embed/v1/{地図の種類}?key={APIキー}"></iframe>`

となっている場合、{地図の種類}の部分の違いによって有料になるものがあります。

【無料になる場合】

地図の種類	説明
place	指定した箇所にマーカーをつけた地図を表示
view	マーカーや経路のないシンプルな地図。

Googleマップをレスポンシブに対応させる

https://webdesignday.jp/inspiration/technique/css/4213/

Googleマップをレンスポンシブに対応する方法

Advanced Custom Fields 　カスタムフィールド機能

トミソートレジャーショップで使用　tomiso-shop/

custom filed templete が　アップデートの問題なのか追加できなくなっているのでこちらのプラグインで対応　こっちの方が断然良い！！

Advanced Custom Fieldsの全フィールドタイプを徹底解説

チェック項目で管理画面内に表示させるものを全てコントロールできる。

一応情報として下記は記して残しておくが、結論から言ってAdvanced Custom FieldのGoogle mapではなぜかAPIキーがセットされているのに　住所で検索すると【このページではGoogleマップが正しく読み込まれませんでした】とエラーになるのであきらめる。下記色々やったがだめだった。

代替案として、テキストエリアに　マップのコードをペーストしてもらうことにする。プレースホルダーにはコード取得方法をしるしてやり方をアシスト。

※テキストエリアにグーグルマップいれるとbootatrapのガターが0になるっぽいので余白をクラスで左右に15pxづつ追加で調整すると良い。

↓レスポンシブにするためのCSS

.googlemap {height:250px;
　　　　　　position: relative;
　　　　　　　padding-bottom: 56.25%;
　　　　　　　padding-top: 30px;
　　　　　　　height: 0;
　　　　　　　overflow: hidden;}

.googlemap iframe,
.googlemap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left:15px;
padding-right:15px;
}

グーグルマップを埋め込めるようにするためには　グーグルマップのAPIキーの取得と設定が必要となる。

キーの取得方法↓

https://www.zenrin-datacom.net/business/gmapsapi/api_key/index.html

キーを取得したらfunctions.php　header.phpに下記記載して、APIキーを張り付ける

POINT！

keyの取得画面でGoole Cloud Platformでの表示項目が違う！

APIサービスの有効化がないので、代わりにAPIライブラリから　Maps Javascript APIを選択。有効ボタン後は、　認証情報を作成しないとキーは作られない。

またキーは作るときに認証情報設定を必ずしないと有効にならないようだ。HTTPリファラーを選択して、ワイルドカードつける

http://cm-creation.net/yoshida/* yoshida以降のものも認識してくれる。

APIキーはサイトドメインとして取得しなくてはならないようなので、テストサイト用に取得しても、本番はお客さんのドメインにワイルドカード付けて新たに発行する必要がある。

APIキーを編集するときは、APIとサービス→認証情報→APIキーをクリック

https://www.zenrin-datacom.net/business/gmapsapi/api_key/index.html

functions.phpに記載

下記のコードをfunctions.phpに追記します。
「APIキー」は、Google Maps APIで取得したAPIキーを記載してください。

function my_acf_google_map_api( $api ){
$api['key'] = 'APIキー';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

下記をheader.phpに記載↓

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

Advanced Custom FieldでGooglemapが表示されない時の対処法

ページに出力するために、phpに記載方法

フィールドグループを適用させた投稿タイプのテンプレートを編集し、カスタムフィールドのフィールド値を出力しましょう。

カスタムフィールドのフィールド値を出力する際は、基本的には以下のコードを使用します。「フィールド名」という部分は、表示させたいカスタムフィールドの「フィールド名」に置き換えて使いましょう。

補足

「フィールド名」は、フィールドグループを作成した際に、各フィールドに設定したフィールド名のことです。

<?php the_field('フィールド名'); ?>

例えば、フィールド名が「sample_text」の場合、以下のコードを使用することでフィールド値を出力できます。

<?php the_field('sample_text'); ?>

↓手順の4　で表記されている。

Advanced Custom Fieldsの使い方：全項目の説明 / 出力方法 / 活用事例などを紹介

画像の出力設定

Advanced Custom Fields で画像出力する

画像IDで出力

画像のURLをそのまま返します。
画像をそのまま出力したいときには一番簡単ですね。

<?php if( get_field('image') ): ?>
	<img src="<?php the_field('image'); ?>" />
<?php endif; ?>

bootstrapの　class=”img-fluid mx-auto d-block px-0″　を追加できるから　大きさはレスポンシブにできる

<?php if( get_field(‘sub_img1‘) ): ?>
<img src=”<?php the_field(‘sub_img1‘); ?>” class=”img-fluid mx-auto d-block”/>
<?php endif; ?>

【Advanced Custom Fields】カスタム投稿タイプにカスタムフィールドを設定する

【Advanced Custom Fields】カスタム投稿タイプにカスタムフィールドを設定する

wordpress グーグルマップ

GoogoleMapのコードをレスポンシブ対応させる方法

https://infinityakira-wp.com/simple-map/

google map埋込み複数ポイント縮尺・位置　

primary/chance/index.html

※マップのポイントが間違っていて直す時は、いったんのマップのポイントクリックでポップアップ内のごみ箱をして削除して新たに検索窓からマップ住所を打ち込み追加するしかない。修正はできない。削除しての追加しかできない。

Googleマップに複数ピンを立てて一括表示する方法

https://appli-world.jp/posts/44

googleマイマップを埋め込むときに縮尺・位置を調整する方法

googleマイマップを埋め込むときに縮尺・位置を調整する方法

google mapに　企業のポインターを登録するには

Google マイビジネスに申請。

オーナーですかリンクを押して、企業名や電話番号、URLや住所を入力して送信した後にオーナー確認方法がでるので選択する。自社もはがきで確認方法にした。

しばらくすると確認コード記載のハガキが登録先住所へ届く。

コードの入力のために申請時に使用したGoogleアカウントで記載されているURLにアクセスして確認コードを入力する

ご利用を開始して、グーグルマップにて名称を入れるとポインターが表示されている。

埋め込んだgooglemapの”拡大地図を表示”をすると別の場所表示する

埋め込んだgooglemapの”拡大地図を表示”をクリックすると別の場所表示するときがある。

正確な位置のGoogleMapsをサイトに埋め込もう！

を参照して、まず、正確な建物の座標を「この位置について」で取得

上記のコードの座標部分を修正

ユニオン　campagin/maebashi.html

gmap.v3.js でスマホでも複数マーカー表示確認済みＯＫ

※new-chance/profile にて実装

gmap.v3.js は下記からダウンロード

https://www.synck.com/contents/download/javascript/gmap.v3.js.html

もしくはdesktop/webコンテンツツール/gmap.v3.jsに保存

スマホでも複数マーカーが見切れないようにするには少々カスタム必要

まずは、

●gmap.v3.js

gmap.v3.js 下記の紫の箇所はnullすること。widthとheightの値はhtml側で別途表記しないと見切れる。

28行目から30行目あたり。

function gmap(obj){
this.init = function(obj){
this.Default = {“width”: null,”height”: null,”mobile-width”: null,”mobile-height”: null,“lat”: null,”lng”: null,“zoom”: null,“title”: “Map”,”type”: “ROADMAP”,”icon”: null,”window”: false,’multiwindow’: false};

●ｈｔｍｌ

<body>には

<div class=”gmap” id=”mapContainer” data-width=”100%” data-mobile-width=”100%” data-zoom=”10″ data-height=”350″ data-mobile-height=”250″ >
<div class=”gmaker” data-lat=”36.720227″ data-lng=”136.9852728″ data-title=”チャンスメーカー本社” >
<h3>チャンスメーカー本社</h3>
<p>本社<br/>高岡市戸出市野瀬790番地</p>
</div>
<div class=”gmaker” data-lat=”36.656766″ data-lng=”137.240868″ data-title=”チャンスメーカー富山事務所”>
<h3>チャンスメーカー富山事務所</h3>
<p>富山事務所<br/>富山県富山市本郷30番地6</p>
</div>
<div class=”gmaker” data-lat=”36.720227″ data-lng=”136.981774″ data-title=”チャンスメーカー製作室”>
<h3>チャンスメーカー製作室</h3>
<p>制作室<br/>富山県高岡市辻73-2</p>
</div>

</div>

class=”gmap”　　　class=”gmaker” 　　は必要要素。

data-width=”100%” data-mobile-width=”100%”で幅を設定　％でもpxでもどちらもＯＫ

data-height=”350″ data-mobile-height=”250″　で高さ設定

data-zoom=”10″でマップの縮小サイズを決める。複数マーカーが入る縮小サイズにする。

data-lat=”36.656766″ data-lng=”137.240868″　で緯度経度

●ＣＳＳ

.gmapや.gmap iframe, .gmap object, .gmap embedに設定記述は不要。かえって記入すると辺になる

サイトに埋め込んだGoogleマップの縮尺を変更＆CSSでレスポンシブ対応する方法

http://planbworks.net/web/googlemap-customize.html

google map 複数ポインターはレスポンシブどうしたら良いかわからない

備忘録に記録してあるgoogle mapのレスポンシブのpostに書いてあるとおりやっても、スマホサイズにすると複数あるポインターマーカーあってもレスポンシブにならない。

グーグルマップのマイプレイス機能使っても、マップの左上が起点となり、そこからのピクセル幅でしか表示されない

グーグルマップ　レスポンシブ　googlemap

GoogleMapの埋め込む地図をCSSでレスポンシブ対応させ伸縮させる方法

http://log-file.net/web/css-2095

下記のCSSとHTMLを表示したい箇所に設置して作業完了です。

CSS

<style type="text/css">
<!--
.gmap{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>

<divclass="gmap">

<iframesrc=

"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.673685490624!2d139.7292645!3d35.660410500000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b770913970d%3A0xccc3467fcb15b353!2z44Kw44O844Kw44Or5qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1436626683899"

width="600"height="450"frameborder="0"style="border:0"allowfullscreen></iframe>

</div>

※padding-bottom: 56.25%;　でマップの高さを設定している

グーグルマップ　会社名登録方法　Google マイビジネス

http://bazubu.com/wp-google-mybusiness-24014.html

チャンスメーカー制作部　として我が家を登録中。

コード送ってもらってる最中

MapPress Easy Google Maps

wordpressにgoogle map挿入可能

ＩＥでも大丈夫。緯度経度でも入力可能

松田工務店のイベント情報で使用

http://www.kitaguchi.jp/others/2218.html

http://ja.forums.wordpress.org/topic/23175

Simple Map – 超簡単＆スマフォ対応のGoogle Map

IEだけ、高さがでない！！

http://firegoby.jp/wp/simple-map

http://blog.t-alive.com/wordpress/plug-in/simple-map/

http://firegoby.jp/archives/5243

google api ver.3 での複数マーカー

http://pinoyuki.hatenablog.com/entry/2012/03/17/010213

■HTML

<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”>
</script>
<script src=”./js/gmap.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize(id){
gmap_initialize(id);

var data = new Array();
data.push({position: new google.maps.LatLng(34.687574,135.189857), title: ‘ローソン’, content: ‘ローソン神戸中央西町 <br/><a href=\’http://www.lawson.co.jp/\’>HP</a>’});
data.push({position: new google.maps.LatLng(34.6882,135.188087), title: ‘南京町広場’, content: ‘南京町広場’});

setMarkerData(data);
}
</script>
<title>GoogleMapTest1</title>
</head>
<body onload=”initialize(‘gmap_canvas’)”>
<div id=”gmap_canvas” style=”width: 480px; height: 320px;”></div>
</body>
</html>

■　./js/gmap.js

/**
* 開始ズームサイズ
* @type Number
*/
var START_ZOOM = 16;

/**
* 開始中心位置
* @type google.maps.LatLng
*/
var START_CENTER = new google.maps.LatLng(34.687463, 135.18813);

/**
* GoogleMapオブジェクト
* @type google.maps.Map
*/
var gmap;

/**
* 現在開いている情報ウィンドウ
* @type google.maps.InfoWindow
*/
var openInfoWindow;

/**
* GoogleMapの初期処理
* @param {String} id GoogleMap表示領域ID
*/
function gmap_initialize(id) {
/**
* 地図オプション
* @param Object
*/
var mapOption = {
zoom: START_ZOOM,
center:START_CENTER,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
};
gmap = new google.maps.Map(document.getElementById(id), mapOption);
}

/**
* マーカーデータのセット
* @param {Object} マーカーデータ
*/
function setMarkerData(makerArray) {

// 登録データ分のマーカーを作成
for (var i = 0; i < makerArray.length; i++) {
var markerData = makerArray[i];
var marker = new google.maps.Marker({
position: markerData.position,
title: markerData.title,
map: gmap
});

// マーカーのclickリスナー登録
setMarkerClickListener(marker, markerData);
}
}

/**
* マーカーのクリックイベントリスナーの登録
* @param {google.maps.Marker} marker マーカーオブジェクト
* @param {Object} markerData マーカーに設定する情報ウィンドウデータ
*/
function setMarkerClickListener(marker, markerData) {
// マーカークリック時に情報ウィンドウを開く。
// すでに開いているウィンドウがある場合は、閉じてから開く。
google.maps.event.addListener(marker, ‘click’, function(event) {
if (openInfoWindow) {
openInfoWindow.close();
}
openInfoWindow = new google.maps.InfoWindow({
content: markerData.content
});
google.maps.event.addListener(openInfoWindow,’closeclick’,function(){
openInfoWindow = null;
})
openInfoWindow.open(marker.getMap(), marker);
});
}

Google マップ・YouTubeなどの埋め込みをレスポンシブにするEmbed Responsively

埋め込みコードをレスポンシブWebデザインでも利用できるように変換してくれるサービス「Embed Responsively」

予めGoogle マップなどで取得したコードをペースト、ボタンを押すだけでコードを書きだしてくれますので簡単！

書き出されるコードはスタイルシートも一緒になっていますのでご注意を…

※マップの大きさがデバイスによって縮小されるのではなく、widthがちょうどよい大きさにカットされるようなイメージだ

◾️支払い情報を入力

複数のピン立てるにはjavascriptが分からんとどうにもならん

仕様ルールについて↓

使用制限

wordpressの地図プラグイン Leaflet Maps Marker

[A] iframeを使って地図から直接埋め込み

[B] APIを利用してiframeで地図を埋め込み

【無料になる場合】

グーグルマップを埋め込めるようにするためには グーグルマップのAPIキーの取得と設定が必要となる。

POINT！

functions.phpに記載

ページに出力するために、phpに記載方法

画像の出力設定

画像IDで出力

【Advanced Custom Fields】カスタム投稿タイプにカスタムフィールドを設定する

GoogoleMapのコードをレスポンシブ対応させる方法

Googleマップに複数ピンを立てて一括表示する方法

googleマイマップを埋め込むときに縮尺・位置を調整する方法

●gmap.v3.js

●ｈｔｍｌ

●ＣＳＳ

GoogleMapの埋め込む地図をCSSでレスポンシブ対応させ伸縮させる方法

CSS

IEだけ、高さがでない！！

グーグルマップを埋め込めるようにするためには　グーグルマップのAPIキーの取得と設定が必要となる。