質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

527閲覧

Google javascript API がうまく読み込めない?

wabisabi

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/12/19 07:30

編集2017/12/20 02:27

###前提・実現したいこと
現在地を取得して目的地と比較したい

###発生している問題・エラーメッセージ

HTMLで同じようなコードで試したときはきちんと結果がでましたが、 XHTMLで実行すると結果がでません。(test用のAlertは出ています) javascript側で「グローバル変数Googleは宣言されてません」とでています。

###該当のソースコード

XHTML

1<?xml version='1.0' encoding='UTF-8' ?> 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml" 4 xmlns:h="http://xmlns.jcp.org/jsf/html"> 5 <h:head> 6 <title>Facelet Title</title> 7 <script 8 src="https://maps.googleapis.com/maps/api/js?key=/*自分のAPIキー(入力してます)"> 9 </script> 10 <h:outputScript library="js" name="huratto_add.js"/> 11 </h:head> 12 <h:body> 13 14 <h:commandButton value="検索" 15 onclick="geo()"/> 16 17 <div id="time1"></div> 18 </h:body> 19</html>

javascript

1/* 2 * To change this license header, choose License Headers in Project Properties. 3 * To change this template file, choose Tools | Templates 4 * and open the template in the editor. 5 */ 6 7// success callback 8function success(position) { 9 //alert( "latitude: " + position,coords.latitude + "\nlongitude: " + position.coords.longitude ); 10 11 var lat = position.coords.latitude; 12 var long = position.coords.longitude; 13 initMaps(lat, long); 14 15} 16; 17// error callback 18function error(err) { 19 alert("can't get position"); 20} 21; 22function geo() { 23 navigator.geolocation.getCurrentPosition(success, error); 24 alert("12"); 25 26} 27// navigator.geolocation.getCurrentPosition(success,error); 28 29 30function initMaps(lat, long) { 31 var bounds = new google.maps.LatLngBounds; 32 var markersArray = []; 33 34 //alert( "経度: " +lat+ "緯度: " + long ); 35 36 //var origin1 = 'Tokyo, Japan'; 37 var origin2 = new google.maps.LatLng(lat, long); 38 var destinationA = '鹿児島中央駅,Kagoshima, Japan'; 39 //var destinationB = 'Kumamoto, Japan'; 40 41 var destinationIcon = 'https://chart.googleapis.com/chart?' + 42 'chst=d_map_pin_letter&chld=D|FF0000|000000'; 43 var originIcon = 'https://chart.googleapis.com/chart?' + 44 'chst=d_map_pin_letter&chld=O|FFFF00|000000'; 45 /*var map = new google.maps.Map(document.getElementById('map'), { 46 center: {lat: 55.53, lng: 9.4}, 47 zoom: 10 48 });*/ 49 var geocoder = new google.maps.Geocoder; 50 51 52 var service = new google.maps.DistanceMatrixService; 53 service.getDistanceMatrix({ 54 origins: [origin2], 55 destinations: [destinationA], 56 travelMode: 'WALKING', 57 unitSystem: google.maps.UnitSystem.METRIC, 58 avoidHighways: false, 59 avoidTolls: false 60 }, function (response, status) { 61 if (status !== 'OK') { 62 alert('Error was: ' + status); 63 } else { 64 var originList = response.originAddresses; 65 var destinationList = response.destinationAddresses; 66 var outputDiv = document.getElementById('output'); 67 outputDiv.innerHTML = ''; 68 deleteMarkers(markersArray); 69 70 /*var showGeocodedAddressOnMap = function (asDestination) { 71 var icon = asDestination ? destinationIcon : originIcon; 72 return function (results, status) { 73 if (status === 'OK') { 74 map.fitBounds(bounds.extend(results[0].geometry.location)); 75 markersArray.push(new google.maps.Marker({ 76 map: map, 77 position: results[0].geometry.location, 78 icon: icon 79 })); 80 } else { 81 alert('Geocode was not successful due to: ' + status); 82 } 83 }; 84 }; 85 */ 86 target2 = document.getElementById("time1");//表示させる場所をIDで指定 87 target2.innerHTML = ''; 88 for (var i = 0; i < originList.length; i++) { 89 var results = response.rows[i].elements; 90 geocoder.geocode({'address': originList[i]}, 91 showGeocodedAddressOnMap(false)); 92 for (var j = 0; j < results.length; j++) { 93 geocoder.geocode({'address': destinationList[j]}, 94 showGeocodedAddressOnMap(true)); 95 target2.innerHTML += originList[i] + ' から ' + destinationList[j] + 96 ': ' + results[j].distance.text + ' まで ' + 97 results[j].duration.text + '<br>'; 98 } 99 } 100 } 101 }); 102} 103 104function deleteMarkers(markersArray) { 105 for (var i = 0; i < markersArray.length; i++) { 106 markersArray[i].setMap(null); 107 } 108 markersArray = []; 109} 110

###補足情報(言語/FW/ツール等のバージョンなど)
Netbeans8.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問