Google Maps on qwerty.work

Google Maps on qwerty.work https://qwerty.work/categories/google-maps/ Recent content in Google Maps on qwerty.work Hugo -- gohugo.io ja-JP Sat, 14 Aug 2021 13:05:14 +0900 Googleマップ埋め込みタグのiframe書式例まとめ https://qwerty.work/post/2021/08/googleimap-flame/ Sat, 14 Aug 2021 13:05:14 +0900 https://qwerty.work/post/2021/08/googleimap-flame/ <h2 id="書式例">書式例 </h2><p>赤田海水浴場の地図を表示する例</p> <h4 id="通常例">通常例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672"><iframe</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp"</span> <span style="color:#a6e22e">width=</span><span style="color:#e6db74">"600"</span> <span style="color:#a6e22e">height=</span><span style="color:#e6db74">"450"</span> <span style="color:#a6e22e">style=</span><span style="color:#e6db74">"border:0;"</span> <span style="color:#a6e22e">allowfullscreen=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">loading=</span><span style="color:#e6db74">"lazy"</span><span style="color:#f92672">></iframe></span> </span></span></code></pre></div><h4 id="キーワードで指定するシンプルな例">キーワードで指定するシンプルな例 </h4><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672"><iframe</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">"https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15"</span> <span style="color:#a6e22e">width=</span><span style="color:#e6db74">"100%"</span> <span style="color:#a6e22e">height=</span><span style="color:#e6db74">"450"</span> <span style="color:#a6e22e">style=</span><span style="color:#e6db74">"border:0;"</span> <span style="color:#a6e22e">allowfullscreen=</span><span style="color:#e6db74">""</span> <span style="color:#a6e22e">loading=</span><span style="color:#e6db74">"lazy"</span><span style="color:#f92672">></iframe></span> </span></span></code></pre></div><h4 id="パラメーター参考">パラメーター参考 </h4> <div class="link-card"> <a href="https://www.bricoleur.co.jp/blog/archives/4452" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.bricoleur.co.jp/blog/archives/4452" alt="https://www.bricoleur.co.jp/blog/archives/4452" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.bricoleur.co.jp/blog/archives/4452</span> <span class="link-card-url">https://www.bricoleur.co.jp/blog/archives/4452</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7" alt="https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7</span> <span class="link-card-url">https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7</span> </div> </a> </div> <h2 id="留意点">留意点 </h2><p>AMPページでは<code>width="100%"</code>はエラーになるので、<code>width="600"</code>のようにピクセルで指定する必要があります。</p> <p><code>layout="responsive"</code>も加えておくと良いみたいです。（以下参考）</p> <div class="link-card"> <a href="https://qiita.com/otsuky/items/9254065d41598cb242ce" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/otsuky/items/9254065d41598cb242ce" alt="https://qiita.com/otsuky/items/9254065d41598cb242ce" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/otsuky/items/9254065d41598cb242ce</span> <span class="link-card-url">https://qiita.com/otsuky/items/9254065d41598cb242ce</span> </div> </a> </div> <h2 id="その他参考">その他参考 </h2> <div class="link-card"> <a href="https://developers.google.com/maps/documentation/urls/get-started" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://developers.google.com/maps/documentation/urls/get-started" alt="https://developers.google.com/maps/documentation/urls/get-started" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://developers.google.com/maps/documentation/urls/get-started</span> <span class="link-card-url">https://developers.google.com/maps/documentation/urls/get-started</span> </div> </a> </div> <div class="link-card"> <a href="https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b" alt="https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b</span> <span class="link-card-url">https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b</span> </div> </a> </div> イントラネットでGoogle Maps APIが使える？ https://qwerty.work/post/2009/05/googlemaps/ Wed, 27 May 2009 11:42:05 +0900 https://qwerty.work/post/2009/05/googlemaps/ <p>不動産会社に勤務している訳ですが、</p> <p>中古住宅やマンション、売り土地の販売に</p> <p>Google Mapsが使用できないかなと調べていますが、出来そうにない。</p> <p>地図はGoogle Maps APIを利用すればできる訳ですが、</p> <p>規約に違反しそうな感じです。</p> <p>・地図に誰でもアクセスできること</p> <p>・地図そのものを無償で提供すること</p> <p>と、あるページを見ました。</p> <p>あるページ↓</p> <p>**Googleヘルプグループ **<a class="link" href="http://groups.google.co.jp/group/Google-Maps-JP-For-Business-Owners/browse_thread/thread/1a3cac9a78bb6713" target="_blank" rel="noopener" >http://groups.google.co.jp/group/Google-Maps-JP-For-Business-Owners/browse_thread/thread/1a3cac9a78bb6713</a></p> <p>そもそも、イントラネットなので、誰でも地図にアクセスできない。</p> <p>この時点でアウト。</p> <p>なぜ、イントラネットで利用したいか？ですが、</p> <p>他社物件等を無断で公開出来ないなからです。</p> <p>商談での社内利用で有れば問題ないので、</p> <p>イントラネットで地図の利用ができればな～と思った訳なんです。</p> <p>お金を払っても使用できないの？</p> <p>と思い探したところ。ありました。</p> <p>**『Google Maps API Premier』日本でも提供開始、イントラネット内利用も | ネット | マイコミジャーナル **<a class="link" href="http://journal.mycom.co.jp/news/2009/05/18/018/index.html" target="_blank" rel="noopener" >http://journal.mycom.co.jp/news/2009/05/18/018/index.html</a></p> <p>きっと高いんだろうな～</p> <p>**Google Maps API Premier **<a class="link" href="http://www.google.co.jp/intl/ja/enterprise/maps/index.html" target="_blank" rel="noopener" >http://www.google.co.jp/intl/ja/enterprise/maps/index.html</a></p> <p>yahoo!地図もイントラネット利用はできないようです。</p> <p>**Yahoo!デベロッパーネットワーク - 地図 **地図Web APIの利用方法 <a class="link" href="http://developer.yahoo.co.jp/webapi/map/" target="_blank" rel="noopener" >http://developer.yahoo.co.jp/webapi/map/</a></p>