###前提・実現したいこと
現在地を取得して目的地と比較したい
###発生している問題・エラーメッセージ
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
あなたの回答
tips
プレビュー