Q&A
前提・実現したいこと
お世話になります。
地元の消防団のホームページを管理している者です。
火災が発生した時に火点から一番近い消火栓までの経路を検索できる「消火栓マップ」を作成し活用していました。以前は検索窓に火災発生住所を入力すると、経路が表示されていたのですが、何も表示されなくなり困っています。
プログラミングは全くの初心者です。このコードの作成についてもネットで質問し教えて頂きながらやっと完成したものです。どこがおかしくて表示されないのか判りません。
実際のページは ⇒ http://itohiki119.xrea.jp/syoukasen-map.html です。
よろしくお願い致します。m(_ _)m
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>消火栓マップ</title> <style type="text/css"> html {height: 100%;} body {text-align: CENTER; height: 100%; margin: 0; padding: 0; background-color: #ffffff; font-size: small; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W4", "Osaka", "ＭＳ Ｐゴシック ", Arial, sans-serif;} </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--><script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=ja"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var rendererOptions = {draggable: true};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map, infowindow; function initialize() { infowindow = new google.maps.InfoWindow(); var myLatlng = new google.maps.LatLng(34.794267, 134.717400); var myOptions = { zoom : 16, center : myLatlng,
disableDefaultUI: true, /* 一旦全てのUIを無効化 */
zoomControl: true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
/* ★スケールコントロールを有効化 */
scaleControl: true,
/* ★スケールコントロールの表示位置 */
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
var layer = new google.maps.FusionTablesLayer({
query : {
select : 'Geocodable address',
from : '1p04BUIGx5QRXmVWmQvoehKOmpscFODPgfi3emmo'
},
suppressInfoWindows : true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(evt) { infowindow.setOptions({ position : evt.latLng, content : evt.infoWindowHtml, pixelOffset : evt.pixelOffset }); infowindow.open(map); }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); });
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay, "directions_changed", function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute(fromAddress, toAddress) {
var selectedMode = document.getElementById("mode").value;
var fromAddress = document.getElementById("fromAddress").value;
var toAddress = document.getElementById("toAddress").value;
var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
func(response);
}
});
}
// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.9,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/firefighter.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/fire.png'
});
function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);
var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);
endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
map.fitBounds(routes.bounds); // 追記（自動的に...）
}
</script> </head> <body onload="initialize()"> <div id="wrapper"> <a href="http://itohiki119.iinaa.net/bousai/bousai-map.html"><font size="1">防災マップトップへ</font></a> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">車</option> <option value="WALKING">歩き</option> </select> <select id="fromAddress" onchange="calcRoute();"> <option value="34.788139, 134.723404">東山支部</option> <option value="34.796028, 134.723404">継支部</option> <option value="34.801071, 134.717789">奥山支部</option> <option value="34.800423, 134.706573">北原支部</option> <option value="34.805237, 134.698410">兼田支部</option> </select> <form action="#" onsubmit="calcRoute(fromAddress.value, this.toAddress.value); return false"> <font size="3"color="#ff0000">火災発生住所</font> ⇒<input type="text" size="20" id="toAddress" name="to" value="" /> </form> </div> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
Google map APIからGoogle map Platformに変わってからAPI認証していないカスタマイズしたMAPは使えなくなったやつですね。
エラーにAPI認証エラーが出てたので、
console
1Directions Service: This IP, site or mobile application is not authorized to use this API key. Request received from IP address 2001:268:c0e0:2428:8840:1c53:ff37:5476, with referer: http://itohiki119.xrea.jp/syoukasen-map.html For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key 2_.Lc @ js?key=AIzaSyBpkF6ARtWS_ICLK-OOIRPF29371_xqbKE:51
API使用するための登録が必要です。
https://cloud.google.com/maps-platform/?hl=ja
ここから登録できます。
投稿2019/03/06 11:31
編集2019/03/06 11:33
総合スコア163
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/06 13:37
2019/03/06 14:23
2019/03/06 22:46