Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/03/06 (火)

グーグルマップと天気予報

| 18:21 | グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 グーグルマップと天気予報 - 雪乃☆雫のなでしこ日和 のブックマークコメント

 以前JS実行とゆうことを知って、しかし、Javascriptなんていっこも分からないからなぁ~・・・と思っていたんですが、こんなのを見つけました。

コピペで簡単!Google Mapをサイトに表示する方法
http://www.hp-stylelink.com/news/2013/11/20131119.php

 このスクリプトをコピペしてくれば、自分のHPにぐーぐるまっぷが表示出来るって寸法です。コレをなでしこからJS実行で使えば、なんか面白いこと出来そうじゃないですか?♪

 ただ、ここの情報はちょっと古くて、Google Maps APIを使うには、APIキーなるモノを取得しなければならないようです。むむむ。

【2018年度版】Google MapsAPIキー を簡単に取得する
https://nendeb.com/276

 別にキーを取得するだけはやっつけですぐ出来ました☆

 が、キーを他人に使われないよう制限をかけなきゃダメで(1日あたり地図の生成回数が25,000以上が90日以上連続すると課金の対象になっちゃうんだって!)ここを参考にして設定しました。たまにはダッシュボードで数値が異常じゃないか見とく必要もありそうですね・・・むー;


 で、取り込むスクリプトはこうなりまする。

<!-- Google Mapを使うのに必要プラグイン -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx(APIキー)&callback=initMap"></script>

 ただマップを表示するだけなら、JavaScriptのソースをコピペしてきてlatとlonを変えるだけでいいんだけど、なでしこを使って、ボタンでマップを切り替えられるプログラムにしてみました~♪

<script type="なでしこ">
#ボタンのスタイル設定
ボタンスタイルは、{
  "font-size": "24px",
  "padding": "0px 10px",
}
「button」にボタンスタイルをDOMスタイル一括設定。

#ボタンのイベント設定
「#sapporo」をクリックした時には、地図表示(43.0686605,141.3507548,15,"札幌駅")。ここまで。
「#asahikawa」をクリックした時には、地図表示(43.7628477,142.3584328,15,"旭川駅")。ここまで。
「#hakodate」をクリックした時には、地図表示(41.7737832,140.7263354,15,"函館駅")。ここまで。
「#otaru」をクリックした時には、地図表示(43.1977717,140.9941033,15,"小樽駅")。ここまで。

●地図表示(緯度,経度,縮尺,情報)
 「mapInit({緯度},{経度},{縮尺},"{情報}");」をJS実行。
ここまで。
</script>

<H1>なでしこ3てすと~ぐーぐるまっぷの表示</H1>
<HR>
  <button id="sapporo">札幌</button><button id="asahikawa">旭川</button><button id="hakodate">函館</button><button id="otaru">小樽</button>
  <div id="mapField" style="width:520px; height:390px;">ボタンを押すと地図が表示されるよ★</div>

http://www.geocities.jp/snowdrops890/wnako3_test/14_GoogleMap.html

 Javascript部分はほぼコピペなのでここには載せませんが、ソースを表示で見れます。

 なでしこから引数を渡せるように変えました。



 して・・・

 マイナビ連載22目では、お天気APIの使い方を学びました。

 コレもまずはAPIキーを取得しなきゃないようです。

 えええええ英語だぁぁ~(ToT)

 ベベベツニムズカシイコトハナイデスヨ・・・

 キー取得するだけなら、わりとありふれたアレですから・・・

 でででも、こう全部英語なページが開いたりすると、わっと言って画面閉じたくなっちゃうんだよね・・・;;;

 でもまあ、取得出来まして、記事のとうりに簡易エディタで動かすのは当然出来ました。てきとーにご近所の町を色々入れてみましたが、結構な田舎町も名前が登録されていたりしてびっくり。

 だけどなんですか、暴風雪警報も出て外は猛吹雪って時に、のほほんと「曇りがち」とかお知らせしてくれるOpenWeatherMapさまって・・・

 言葉も通じない外つ国の遙か彼方から観測してらっしゃるんだね・・・(違うって;)


 さてさて、それはさておき説明のページをぐーぐる翻訳さまに読んでいただいて、都市名だけでなく緯度と経度での指定も出来るラシイことが分かったので、グーグルマップの表示と連動させてみようと思い立ちました。

 ところが、どうもうまくいかない・・・Ajax送信ができない・・・ってかHTMLにv3.0.31のスクリプトが取り込めてない気がする・・・とゆうことをちょこっとなこ丼(https://nadesiko-users.info/)でつぶやいたら、なななんとあっというまに対応して頂けました!素晴らしいですね!!ありがたいですね!!!


 で、こんな感じ~。

#-----------------------------------------------------------
●天気予報表示(緯度と経度で)
 緯度=緯度を文字列変換から5だけ右端削除。
 経度=経度を文字列変換の5だけ右端削除。
 URL=「https://api.openweathermap.org/data/2.5/weather?lat={緯度}&lon={経度}&appid={APIキー}&units=metric&lang=ja」

# AjaxAPIにアクセス --- (*2)
 URLにGET送信した時には
  画像URL=「https://openweathermap.org/img/w/」
  対象JSONデコードして、Jに代入。# --- (*3)
  天気=J["weather"][0]["description"]
  気温=J["main"]["temp"]
  湿度=J["main"]["humidity"]
  天気アイコン=J["weather"][0]["icon"]
  日時=J["dt"]を日時変換の16だけ文字左部分。
  場所=J["name"]

  # HTML表示--- (*4)
  天気予報=「{日時}の{場所}の天気<BR>
<img src="{画像URL}{天気アイコン}.png" align="middle"> {天気}<BR>
気温: {気温}度 / 湿度: {湿度}%」
  天気予報を「#weather」にDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●右端削除(SからAだけ|Sの)
 数=Sの文字数。
 S=Sの(数-(A-1))からAだけ文字削除。
 Sで戻るここまで。
#-----------------------------------------------------------

http://www.geocities.jp/snowdrops890/wnako3_test/14_OpenWeatherMap.html

 地名も日本語表示に対応して欲しいよね~。

 いや、これは単に緯度と経度でコレが取得出来るのが面白いからこうしてみただけなんだけどねw

 しかものために、ムダに緯度と経度を小数点以下二桁までに加工してみたりして(^▽^;(そうないとナゼか札幌がHokkaidoになってしまう。ナゾだ・・・)

 ナゾと言えば「Sapporo-shi」と都市名で指定した時と、緯度経度で指定した時とで、lonとlatとnameは同じ物が返ってきてるのに、天気の結果が異なる時があるっていうね???

 でもまあ、こんなもんでしょ☆

 敵が英語だから、ナゾを解明しようとは思わんし、なでしこのことじゃないし。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180306