コンテンツにスキップ

実装のヒント / Implementation Tips

NAVITIME Mapsの/map_scriptをJavaScriptでリクエストする際、ヘッダ情報が付与されない場合がありますが、以下のようにjQuery(Ajax)を利用することでヘッダ情報を付与したリクエストが可能です。
※下記の実装例のようにAPIキー(x-rapidapi-key)をそのまま記載することは、セキリュティ上好ましくないため、お客様側でヘッダ情報の隠蔽をして頂くようお願いいたします。

When requesting /map_script of NAVITIME Maps with JavaScript, no header information is sometimes added. In this case, you can use jQuery (Ajax) to make a request with header information as shown below.
※CAUTION
Describing the API key (x-rapidapi-key) as it is, as shown in this implementation example, is not good for security. Please hide the header information on your side.

▼jQuery(Ajax)を使った実装例 / Implementation example using jQuery(Ajax)▼ 

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
   <title>mapsample</title>
   <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
</head>
<script>
</script>
<body>
   <div id="map" style="height: 600px; width: 100%;"></div>
   <script>
        function getMapScript() {
            var defer = $.Deferred();
            $.ajax({
                type: 'GET',
                url: 'https://navitime-maps.p.rapidapi.com/map_script?host=localhost',
                dataType: 'text script',
                cache: true,
                headers: {
                    'x-rapidapi-key': 'your_api_key'
                },
                success: function(response) {
                    console.log("success");
                    defer.resolve();
                },
                error: function(response) {
                    console.log("error");
                    defer.reject();
                }
            });
            return defer.promise();
        }

        // Must be done after getMapScript() is completed.
        function init() {
            console.log("init");
            var displayMap = getMapScript();
            displayMap.done(function() {
                console.log("display map");
                var map = new navitime.geo.Map('map', new navitime.geo.LatLng('35.681298', '139.766247'), 15, {
                    // Fit to the map display area
                    bounds: new navitime.geo.BoundsInfo(0, $('#map').width(), 0, $('#map').height())
                });
            });
        }
        window.onload = init
   </script>
</body>
</html>