グーグルマップ API コントールが正しく表示されない@ホームページビルダーの使い方

ホームページ作成教室の生徒さんが、現在WordPressテーマのカスタマイズに挑戦しています。 グーグルマップをページに挿入して表示するのですが、拡大・縮小のボタン(コントルール)が正しく表示されません。

グーグルマップ API コントロール

CSS(スタイルシート)がグーグルマップと、テーマでコンフリクトするようです。 #map_canvas img { max-width: none; } (上記は例です) テーマのスタイルシートを編集して対処しました。

グーグルマップ API コントロール

このような対処方法は英語でネット検索できる講師が常駐している当ホームページビルダー教室だから見つけられるのです。

google map api の使い方 BY ホームページビルダー教室

ホームページビルダー教室の生徒さんがワードプレスのテーマのカスタマイズに挑戦しています。そこへのGoogleマップの挿入方法の確認のための試験投稿です。

 

Google Maps API 使い方調査のための投稿@ホームページビルダー教室

グーグルマップをホームページに貼り付けて表示することは一般的です。ホームページビルダーを使ってグーグルマップの挿入は簡単です。また、グーグル・マップを検索して、任意の場所の共有HTMLコード(iframe)を得ることも簡単です。(現在のグーグルマップでは共有ボタン 鎖マーク が表示されないようです。昔のグーグルマップのUIに切り替えます。) 地図の表示方法をもっと細かく制御するにはGoogle Maps APIを使います。

 

 

グーグル マップ 経路の使い方 ホームページビルダー教室へようこそ!

ホームページビルダー教室へ遠方から、お越しになるかたが後をたたないため、またグーグルマップの技術的調査を兼ねて、

当教室(パソコン教室キュリオステーション)への経路を検索できるようにしました。教室アクセス・ページをご覧ください。

たとえば、出発地(例 玉川学園前)を入力して「検索」ボタンをクリックすれば、

グーグルマップ

ホームページビルダー教室までの経路が表示されます

ホームページビルダー教室経路

グーグルマップの使い方応用です。以下のHTMLコーディングにより実現しております。

<h3>ホームページビルダー教室<br clear="none" />
(パソコン教室キュリオステーション鶴見つくの店)への経路案内 (Google)</h3>
<form action="http://www.google.co.jp/maps" method="get" name="form_main">出発地
<input id="saddr" name="saddr" size="25" type="text" value="" />
目的地
<input id="daddr" name="daddr" size="30" type="text" value="パソコン教室キュリオステーション鶴見つくの店" />
<div class="rootButton"><input class="rootBtn" type="submit" value="検索" /></div>
</form>