Google Maps API指示不显示地图

时间:2016-05-11 22:28:21

标签: google-maps google-maps-api-3

使用Google Maps Directions API,之前就可以使用了。

只是为了澄清......方向有效,但不是地图背景:

JavaScript代码:

function initMap() {
    var myLatLng = {lat: 34.072350, lng: -118.401209};
    var directionsService = new google.maps.DirectionsService();
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 19,
        center: myLatLng
    });
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Wallis Annenberg Center for the Performing Arts'
    });

    directionsDisplay.setMap(map);

    var onChangeHandler = function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
}


function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('start').value,
        destination: "9390 N. Santa Monica Blvd. Beverly Hills, CA 90210",
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

HTML和CSS代码:

<style type="text/css">
#map {width:1050px;height:500px;}
</style>
<div id="map"></div>

试着遵循这个: https://developers.google.com/maps/documentation/javascript/examples/directions-simple

对于本网站: http://thewallis.org/directionsandparking.php

这是它的样子: enter image description here

修改

我没有看到的一些事情...... _custom.css操纵谷歌地图图像的响应性变得重要。以下是影响问题的示例代码:

#map {width:1050px !important;height:500px !important;}

1 个答案:

答案 0 :(得分:2)

.inner-section img:first-child的样式也会影响maps-API使用的图像。找到另一个选择器(不会影响地图中的图像)或覆盖地图中图像的这些样式