APIキーいらないGマップ
Gマップを検索
住所を入力して入れたい地図を表示
共有クリック
地図を埋め込むをクリック
中をクリック
カスタムサイズをクリック
カスタムサイズを１０００×６００に変える
「HTMLをコピー」をクリック
WPの地図を入れるページを開く
地図を入れたいところを右クリックして貼り付け
Gマップで取得したコードの中の「width=”600″」の部分を「width=”100％”」に変更
※高さは「height:600px」の数字を変更
公開
スマホ時の地図の高さを調整するとき
HTML
div class=”map-container”
ここに地図の埋め込みコード
/div
CSS
/* スマホでは地図の高さを300pxにする */
@media (max-width: 768px) {
.map-container iframe {
height: 300px;}}
または
HTML
div class=”map”
ここに地図の埋め込みコード
/div
CSS
/*画面のサイズが変更されても、マップは16:9の比率を維持しながら横幅いっぱいに広がる*/
.map {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9のアスペクト比 */
height: 0;}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}
Gマップに複数のピンを立てる
Gmapを検索
保存済み
マイマップ
マイマップを開きます
新しい地図を作成
CREATE
一番上の「無題の地図」クリック
なんの地図かわかるようなタイトル入力する
保存
「無題のレイヤ」をクリック
なんのピンがわかるようなタイトルをつける
保存
検索窓に住所を入力して虫眼鏡マークをクリック
＋地図に追加
バケツから水滴が落ちるマークをクリック
赤RRGB（230.81.0）をクリック（ピンが赤に変わる）
レイヤを追加
「無題のレイヤ」をクリック
なんのピンがわかるようなタイトルをつける
保存
検索窓に住所を入力して虫眼鏡マークをクリック
＋地図に追加
バケツから水滴が落ちるマークをクリック
赤RRGB（230.81.0）をクリック（ピンが赤に変わる）
※必要なピンの分だけレイヤを追加していく（青字の分を繰り返す）
共有
このリンクを知っている人なら誰でも表示できるをONにする
インターネットを検索しているユーザーにこの地図を公開するをONにする
閉じる
一番上の３点マークをクリック
自分のサイトに埋め込み
チェックをはずす
HTMLをコピー
OK
サイトの地図を表示させたいページを開く
左帯からクラシックかHTMLをクリック
・クラシックならビジュアルタブ横のテキストタブをクリック
枠内をクリックして右クリック貼り付け
・HTMLならそのまま枠内クリックして右クリック貼り付け
Gマップで取得したコードの中のwidthを width=”100％” に変更
高さは height:600px の数字を変更
公開
新しく自分専用の地図を作る(なにわ製麺の多数の吹き出しがある地図)
●地図の吹き出し追加
Googleマイマップを検索して開く
利用を開始
新しい地図を作る
「無題の地図」をクリック
右上３点クリック
「地図タイトル」「説明」を入力して「保存」をクリック
※地図の修正は作った地図をクリック
共有＋
ユーザーやグループと共有
他のユーザーとの共有設定
川村陽介（自分）
plus-a14.no.1@outlook.jp
リンクを取得の「変更」をクリック
レイヤを追加
中華そばとか大きなくくりの名前を入力
店を検索窓で検索
店の名前と住所を入力
地図に追加
入力した店名横にカーソルを持っていく
表示されたバケツを流しているアイコンをクリック
アイコンの色を選ぶ
※オリジナルアイコンにするときは他のアイコンをクリック
カスタムアイコン
ディバイスのファイルを選択
入れたいアイコンをダブルクリック
OK
※次からは他のアイコンに入っているオリジナルアイコンをクリックするだけでよい
縦3点アイコンをクリック
メニューから「自分のサイトに埋め込む」をクリック
HTMLをコピー
OK
固定・投稿ページ・ウィジェットを開き
<style type=”text/css”>iframe{max-width:100%;height:600px;}</style>
とコピーしたものをテキストに貼り付ける
貼り付けたHTMLの中にあるwidthとheightを
width=”100%” height=”100%”に変更して保存をクリック
貼り付け例：
<style type=”text/css”>iframe{max-width:100%;height:600px;}</style>
<iframe src=”https://www.google.com/maps/d/u/0/embed?mid=1qM1DB1T1dbKRWtX0gl3-IdTIqyKcbfzI” width=”100%” height=”100%”></iframe>
下記は参考サイト
Googleマイマップを開いてみましょう。
Googleマイマップ ＞＞
貼り付け元 <https://100kado.net/create-google-my-maps>
マイマップにログイン
「新しい地図を作成」をクリック
「無題の地図」をクリック
「地図タイトル」に高井田系中華そば店と入力、「説明」に各店の名前を入力して「保存」をクリック
「無題のレイヤ」をクリック
光洋軒などの店名入力
スポットを検索窓で検索
「地図に追加」をクリック
マーカーをどんどん追加していきましょう。
スポットを検索窓で検索
「地図に追加」をクリック・・・・・繰り返す
※リストの横にある「＋」をクリックしてもマーカーを追加できます。
プレビューで表示した時に、もう少し拡大して表示させたいな、と思ったら「デフォルトビュー」で変更する
メニューから「デフォルトビューを設定」をクリック
貼り付け元 https://100kado.net/google-my-maps-share-preview
https://www.designaoaomama.com/entry/2023/03/10/1790