◆Googe Maps API V3の使い方/地図にお天気アイコンと雲レイヤーを表示させる方法
グーグルマップにお天気情報と雲の状況を表示できるようになっています。
日本語版Google Maps JavaScript API V3 デベロッパーのオーバーレイのページには、アナウンスがないのですが、英語版のデベロッパーページには、「ウェザーレイヤー(WeatherLayer)」について記述があります。
ここでは、2012年4月のGoogle Geo Developers Blogで紹介されているサンプルをベースにお勉強。
◆The Weather and Cloud Layers (Library)
デベロッパーガイドでは、The Weather and Cloud Layers はLibrary(ライブラリー)と書いてあります。Libraryとは?
ライブラリーの概要については、ここのページに記載があります。
要は、地図APIのいくつかの機能を使いたければ、指定しないと使えないよ・・・とのこと。ここでは、このサンプル地図に天気と雲のレイヤーを追加してみたいと思います。
1.まず、地図に天気&雲レイヤーを表示したければ、今までのscriptに「&libraries=weather」を追記する。
<今まで>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=set_to_true_or_false“></script>
<お天気&雲レイヤーを表示したい場合>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=set_to_true_or_false&libraries=weather“></script>
2.function initialize{ }に、レイヤーを追加指定
function initialize() { weatherLayer = new google.maps.weather.WeatherLayer(); weatherLayer.setMap(map); cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(map); }
以上だけで、天気アイコンと雲レイヤーが表示されます(サンプル地図1)。さらにいじりたければ、リファレンスページを参照ください。
◆オプション指定
温度、風速、文字色を指定:google.maps.weather.WeatherLayer class
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS,//またはFAHRENHEIT windSpeedUnits: google.maps.weather.WindSpeedUnit.METERS_PER_SECOND,//またはMILES_PER_HOUR、またはKILOMETERS_PER_HOUR labelColor: google.maps.weather.LabelColor.WHITE//またはBLACK }); weatherLayer.setMap(map);
温度の単位:google.maps.weather.TemperatureUnit class
指定無しで℃表示、
weatherLayer = new google.maps.weather.WeatherLayer();
または、℃(セルシウス)を指定
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS });
F(ファーレンハイト)をつかうなら要指定
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT });
風速の単位:google.maps.weather.WindSpeedUnit class
マイル/hrとする場合
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.WindSpeedUnit.MILES_PER_HOUR });
m/Secとする場合
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.WindSpeedUnit.METERS_PER_SECOND });
km/hrとする場合
weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR });
◆お天気を表示させるトグルボタンを設置する(サンプル地図2の作成)。
最初からお天気アイコンが表示されると地図として不都合ですので、ユーザーが必要なときだけお天気アイコンが表示できるように「トグルボタン」を設けておきます。朱書き部を追加です。
body内には、onclick用のボタンを記述します。
1. Script
<script type="text/javascript"> var center = new google.maps.LatLng(35.67849, 139.39178); var zoom = 8; var mapTypeId = google.maps.MapTypeId.ROADMAP </script> <script type="text/javascript"> var marker; var defmarker; var markers = []; var infoWindow = new google.maps.InfoWindow(); var map, weatherLayer, cloudLayer; function initialize() { var myOptions = { zoom: zoom, center: center, mapTypeId: mapTypeId } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var markers = [ ['公園1', 35.760191,140.061629,'kouen'], ['公園2', 35.643033,139.860592,'kouen'], ['公園3', 35.596286,140.141172,'kouen'], ['温泉1', 35.805307,140.16651,'onsen'], ['温泉2',35.717602,139.980167,'onsen'], ['温泉3', 35.42295,139.89739,'onsen'], ['水族館1',36.333294,140.593817,'suizokukan'], ['水族館2', 35.442851,139.644607,'suizokukan'], ['水族館3', 35.728681,139.719765,'suizokukan'] ]; for (var i = 0; i < markers.length; i++) { var marker = markers[i]; var name = marker[0]; var latlng = new google.maps.LatLng(marker[1], marker[2]); var category = marker[3]; var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>' ; createMarker(latlng,html,map,category,name) } weatherinfo() google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); } function weatherinfo() { weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS,//またはFAHRENHEIT windSpeedUnits: google.maps.weather.WindSpeedUnit.METERS_PER_SECOND,//またはMILES_PER_HOUR、またはKILOMETERS_PER_HOUR labelColor: google.maps.weather.LabelColor.WHITE//またはBLACK }); weatherLayer.setMap(map); cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(map); cloudLayer.setMap(cloudLayer.getMap() ? null : map); weatherLayer.setMap(weatherLayer.getMap() ? null : map); } function toggleweather() { cloudLayer.setMap(cloudLayer.getMap() ? null : map); weatherLayer.setMap(weatherLayer.getMap() ? null : map); } function createMarker(latlng,html,map,category,name) { var iconOffset = new google.maps.Point(34, 34); var iconPosition = new google.maps.Point(0, 0); var iconSize = new google.maps.Size(34, 34); var iconShadowSize = new google.maps.Size(37, 34); var kouenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.png"; var kouenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png"; var kouenIcon = new google.maps.MarkerImage(kouenUrl, iconSize, iconPosition, iconOffset); var kouenShadow = new google.maps.MarkerImage(kouenShadowUrl, iconShadowSize, iconPosition, iconOffset); var onsenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png"; var onsenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png"; var onsenIcon = new google.maps.MarkerImage(onsenUrl, iconSize, iconPosition, iconOffset); var onsenShadow = new google.maps.MarkerImage(onsenShadowUrl, iconShadowSize, iconPosition, iconOffset); var suizokukanUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.png"; var suizokukanShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png"; var suizokukanIcon = new google.maps.MarkerImage(suizokukanUrl, iconSize, iconPosition, iconOffset); var suizokukanShadow = new google.maps.MarkerImage(suizokukanShadowUrl, iconShadowSize, iconPosition, iconOffset); var customIcons = { kouen: {icon:kouenIcon,shadow:kouenShadow}, onsen: {icon:onsenIcon,shadow:onsenShadow}, suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow} }; var icon = customIcons[category] || {}; var marker = new google.maps.Marker( { map: map, position: latlng, icon: icon.icon, shadow: icon.shadow, title: name }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map,marker); }); } window.onload = initialize; </script>
コピペ用
<script type="text/javascript"> var center = new google.maps.LatLng(35.67849, 139.39178); var zoom = 8; var mapTypeId = google.maps.MapTypeId.ROADMAP </script> <script type="text/javascript"> var marker; var defmarker; var markers = []; var infoWindow = new google.maps.InfoWindow(); var map, weatherLayer, cloudLayer; function initialize() { var myOptions = { zoom: zoom, center: center, mapTypeId: mapTypeId } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var markers = [ ['公園1', 35.760191,140.061629,'kouen'], ['公園2', 35.643033,139.860592,'kouen'], ['公園3', 35.596286,140.141172,'kouen'], ['温泉1', 35.805307,140.16651,'onsen'], ['温泉2',35.717602,139.980167,'onsen'], ['温泉3', 35.42295,139.89739,'onsen'], ['水族館1',36.333294,140.593817,'suizokukan'], ['水族館2', 35.442851,139.644607,'suizokukan'], ['水族館3', 35.728681,139.719765,'suizokukan'] ]; for (var i = 0; i < markers.length; i++) { var marker = markers[i]; var name = marker[0]; var latlng = new google.maps.LatLng(marker[1], marker[2]); var category = marker[3]; var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>' ; createMarker(latlng,html,map,category,name) } weatherinfo() google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); } function weatherinfo() { weatherLayer = new google.maps.weather.WeatherLayer( { temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS,//またはFAHRENHEIT windSpeedUnits: google.maps.weather.WindSpeedUnit.METERS_PER_SECOND,//またはMILES_PER_HOUR、またはKILOMETERS_PER_HOUR labelColor: google.maps.weather.LabelColor.WHITE//またはBLACK }); weatherLayer.setMap(map); cloudLayer = new google.maps.weather.CloudLayer(); cloudLayer.setMap(map); cloudLayer.setMap(cloudLayer.getMap() ? null : map); weatherLayer.setMap(weatherLayer.getMap() ? null : map); } function toggleweather() { cloudLayer.setMap(cloudLayer.getMap() ? null : map); weatherLayer.setMap(weatherLayer.getMap() ? null : map); } function createMarker(latlng,html,map,category,name) { var iconOffset = new google.maps.Point(34, 34); var iconPosition = new google.maps.Point(0, 0); var iconSize = new google.maps.Size(34, 34); var iconShadowSize = new google.maps.Size(37, 34); var kouenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.png"; var kouenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png"; var kouenIcon = new google.maps.MarkerImage(kouenUrl, iconSize, iconPosition, iconOffset); var kouenShadow = new google.maps.MarkerImage(kouenShadowUrl, iconShadowSize, iconPosition, iconOffset); var onsenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png"; var onsenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png"; var onsenIcon = new google.maps.MarkerImage(onsenUrl, iconSize, iconPosition, iconOffset); var onsenShadow = new google.maps.MarkerImage(onsenShadowUrl, iconShadowSize, iconPosition, iconOffset); var suizokukanUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.png"; var suizokukanShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png"; var suizokukanIcon = new google.maps.MarkerImage(suizokukanUrl, iconSize, iconPosition, iconOffset); var suizokukanShadow = new google.maps.MarkerImage(suizokukanShadowUrl, iconShadowSize, iconPosition, iconOffset); var customIcons = { kouen: {icon:kouenIcon,shadow:kouenShadow}, onsen: {icon:onsenIcon,shadow:onsenShadow}, suizokukan: {icon:suizokukanIcon,shadow:suizokukanShadow} }; var icon = customIcons[category] || {}; var marker = new google.maps.Marker( { map: map, position: latlng, icon: icon.icon, shadow: icon.shadow, title: name }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map,marker); }); } window.onload = initialize; </script>
2. BODY内
<div> <button onclick="toggleweather()">お天気情報を表示</button> </div>
以上で完成。下記サンプル地図参照。
◆Google Maps JavaScript API V3 サンプル
◆参照先
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
Leave a Comment