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

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

ただいまの
回答率

91.05%

  • JavaScript

    13311questions

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

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 261

wabisabi

score 2

前提・実現したいこと

現在地を取得して目的地と比較したい

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

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

該当のソースコード

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=/*自分のAPIキー(入力してます)">
        </script>
        <h:outputScript library="js" name="huratto_add.js"/>
    </h:head>
    <h:body>

        <h:commandButton  value="検索"
                          onclick="geo()"/>

        <div id="time1"></div>
    </h:body>
</html>
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

// success callback
function success(position) {
    //alert( "latitude: " + position,coords.latitude + "\nlongitude: " + position.coords.longitude );

    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    initMaps(lat, long);

}
;
// error callback
function error(err) {
    alert("can't get position");
}
;
function geo() {
    navigator.geolocation.getCurrentPosition(success, error);
    alert("12");

}
// navigator.geolocation.getCurrentPosition(success,error);


function initMaps(lat, long) {
    var bounds = new google.maps.LatLngBounds;
    var markersArray = [];

    //alert( "経度: " +lat+ "緯度: " + long );

    //var origin1 = 'Tokyo, Japan';
    var origin2 = new google.maps.LatLng(lat, long);
    var destinationA = '鹿児島中央駅,Kagoshima, Japan';
    //var destinationB = 'Kumamoto, Japan';

    var destinationIcon = 'https://chart.googleapis.com/chart?' +
            'chst=d_map_pin_letter&chld=D|FF0000|000000';
    var originIcon = 'https://chart.googleapis.com/chart?' +
            'chst=d_map_pin_letter&chld=O|FFFF00|000000';
    /*var map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 55.53, lng: 9.4},
     zoom: 10
     });*/
    var geocoder = new google.maps.Geocoder;


    var service = new google.maps.DistanceMatrixService;
    service.getDistanceMatrix({
        origins: [origin2],
        destinations: [destinationA],
        travelMode: 'WALKING',
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, function (response, status) {
        if (status !== 'OK') {
            alert('Error was: ' + status);
        } else {
            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;
            var outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';
            deleteMarkers(markersArray);

            /*var showGeocodedAddressOnMap = function (asDestination) {
                var icon = asDestination ? destinationIcon : originIcon;
                return function (results, status) {
                    if (status === 'OK') {
                        map.fitBounds(bounds.extend(results[0].geometry.location));
                        markersArray.push(new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: icon
                        }));
                    } else {
                        alert('Geocode was not successful due to: ' + status);
                    }
                };
            };
        */
            target2 = document.getElementById("time1");//表示させる場所をIDで指定
            target2.innerHTML = '';
            for (var i = 0; i < originList.length; i++) {
                var results = response.rows[i].elements;
                geocoder.geocode({'address': originList[i]},
                        showGeocodedAddressOnMap(false));
                for (var j = 0; j < results.length; j++) {
                    geocoder.geocode({'address': destinationList[j]},
                            showGeocodedAddressOnMap(true));
                    target2.innerHTML +=  originList[i] + ' から ' + destinationList[j] +
                     ': ' + results[j].distance.text + ' まで ' +
                            results[j].duration.text + '<br>';
                }
            }
        }
    });
}

function deleteMarkers(markersArray) {
    for (var i = 0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
    markersArray = [];
}

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

Netbeans8.2

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 91.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13311questions

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