WordPress短期学習プログラム
GoogleMap(グーグルマップ)

Javascript

Google Map APIを使うのは止めました!

Google Map(グーグル マップ)は、APIキー無し、無料で使用する

Google Maps APIを使ってGoogle Map(グーグル マップ)を表示させている方も多いと思います。

最近、という訳でもないですが、料金体系が変わりましたね。

ただ、月200USドルまでであれば無料で使えるとのことだったので、
まあ、大丈夫だろうと考えていたのですが、
想定以上にアクセスが増えたサイトがあり、とうとう料金が発生しました。
Google Cloud API 料金

で、この機会に、
もうGoogle Maps APIを使うのは止めました!

それで、グーグルマップはインラインフレーム(iframe)で読み込むようにしました。
この方法だと、APIキーは不要です。勿論、課金も発生しません。

やりたいことによっては、APIキーを設定しないと実現できない場合もありますが、
仕様を見直すことで、使わない方向にもっていくことも可能です。

例えば、マップ上に複数のマーカー(ピン)を立てたい場合には、APIを使わないと対応できません。
でも、本当に複数のマーカーを立てる必要はありますか?
地図を複数に分けて埋め込むような仕様にはできませんか?
と、見直すことは出来ると思います。

それでも、仕様を見直すことが出来ない場合には仕方ないですが、
極力、APIを使わずに設定できるようにしましょう。

 

インラインフレーム(iframe)での埋め込み方法

インラインフレームでの埋め込みは、
https://maps.google.co.jp/maps?output=embed
を使用します。

Google Mapの埋め込み方法

例えば、都庁の地図を埋め込む場合には、以下のURLを埋め込みます。
https://maps.google.co.jp/maps?output=embed&t=m&z=18&ll=35.689634,139.692101
ll」で地図の中心座標を設定します。

インラインフレームと合わせると、以下の様なHTMLになります。

<iframe src="https://maps.google.co.jp/maps?output=embed&t=m&hl=ja&z=18&ll=35.689634,139.692101" frameborder="0" scrolling="no" width="auto"></iframe>

表示は以下の様になります。

 

Google Mapにマーカー(ピン)を立てる

マーカー(ピン)を立てる場合には、「q」というパラメータを使用します。

<iframe src="https://maps.google.co.jp/maps?output=embed&t=m&hl=ja&z=18&ll=35.689634,139.692101&q=35.689634,139.692101" frameborder="0" scrolling="no" width="auto"></iframe>

表示は以下の様になります。

 

使用できるパラメータ

埋め込み時に使用できるパラメータをまとめておきます。

パラメータ内容使用例設置可能な値
ll地図の中心点ll=35.689634,139.692101
q文字列検索q=東京駅住所、施設名などを指定
q緯度経度q=35.689634,139.692101緯度と経度をカンマ(,)区切りで指定
z縮尺z=180~23
t表示モードt=mm => 地図
k => 航空写真
h => 地図 + 航空写真
p => 地形図
e => Google Earth
hl言語hl=jaja => 日本語
us => 英語
zh-CN => 中国語簡
zh-TW => 中国語繁
など

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    Geolocation APIを使ってスマホで位置情報取得

    iphoneやAndroidのGPSを利用して位置情報を取得したい場合…

  2. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  3. JavaScript

    Javascript

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

  4. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  5. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  6. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

最近の記事

  1. SEO(エスイーオー)
  2. WordPressプラグイン「Anti-spam」
  3. システムエラー
  4. PHP(ピー・エイチ・ピー)
  5. SONY 広角レンズ「SEL1018」
  6. PHP(ピー・エイチ・ピー)
  7. 俺流塩ラーメン
  8. SEO(エスイーオー)
  9. Linux(リナックス)
  10. Linux(リナックス)
PAGE TOP