Google地圖未顯示在我的網站上

Question

我目前正在為銀行的項目進行調整，他們需要使用Google Maps顯示銀行的位置。

問題在於該網站已經建立，而對他人的代碼進行處理對我來說很困難。

谷歌地圖位於一個名為contact.php的文件中，它具有聯系表單，並且谷歌地圖設置為背景。 我將粘貼Javascript API以查看是否存在任何錯誤

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4Z5K4tM5FBXQH5R__XwqyPzRbQR-fIZY"></script> <script> jQuery(document).ready(function($){ $('#btn_onlineb').css('color', '#6ca8cc'); //set your google maps parameters var latitude = 15.299594, longitude = -61.387215, map_zoom = 8; //google map custom marker icon - .png fallback for IE11 var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1; var marker_url = ( is_internetExplorer11 ) ? 'img/pic_zumageo.png' : 'img/pic_zumageo.png'; //define the basic color of your map, plus a value for saturation and brightness var main_color = '#acc8d4', saturation_value= -20, brightness_value= 5; //we define here the style of the map var style= [ { //set saturation for the labels on the map elementType: "labels", stylers: [ {saturation: saturation_value} ] }, { //poi stands for point of interest - don't show these lables on the map featureType: "poi", elementType: "labels", stylers: [ {visibility: "off"} ] }, { //don't show highways lables on the map featureType: 'road.highway', elementType: 'labels', stylers: [ {visibility: "off"} ] }, { //don't show local road lables on the map featureType: "road.local", elementType: "labels.icon", stylers: [ {visibility: "off"} ] }, { //don't show arterial road lables on the map featureType: "road.arterial", elementType: "labels.icon", stylers: [ {visibility: "off"} ] }, { //don't show road lables on the map featureType: "road", elementType: "geometry.stroke", stylers: [ {visibility: "off"} ] }, //style different elements on the map { featureType: "transit", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "poi", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "poi.government", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "poi.sport_complex", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "poi.attraction", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "poi.business", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "transit", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "transit.station", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "landscape", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "road", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "road.highway", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] }, { featureType: "water", elementType: "geometry", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value } ] } ]; //set google map options var map_options = { center: new google.maps.LatLng(latitude, longitude), zoom: map_zoom, panControl: false, zoomControl: false, mapTypeControl: false, streetViewControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false, styles: style, } //inizialize the map var map = new google.maps.Map(document.getElementById('google-container'), map_options); //add a custom marker to the map var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map, visible: true, icon: marker_url, }); //add custom buttons for the zoom-in/zoom-out on the map function CustomZoomControl(controlDiv, map) { //grap the zoom elements from the DOM and insert them in the map var controlUIzoomIn= document.getElementById('cd-zoom-in'), controlUIzoomOut= document.getElementById('cd-zoom-out'); controlDiv.appendChild(controlUIzoomIn); controlDiv.appendChild(controlUIzoomOut); // Setup the click event listeners and zoom-in or out according to the clicked element google.maps.event.addDomListener(controlUIzoomIn, 'click', function() { console.log("Plus: " + map.getZoom()); map.setZoom(map.getZoom()+1) }); google.maps.event.addDomListener(controlUIzoomOut, 'click', function() { console.log("Minus: " + map.getZoom()); map.setZoom(map.getZoom()-1) }); } var zoomControlDiv = document.createElement('div'); var zoomControl = new CustomZoomControl(zoomControlDiv, map); //insert the zoom div on the top left of the map map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv); }) 

您能告訴我哪些CSS樣式將其顯示為背景嗎？

Answer 1

乍看之下，您在javascript對象中的逗號位置錯誤（請刪除對象最后一個條目處的逗號）

    var map_options = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: map_zoom,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: style
    }
    ....
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        visible: true,
        icon: marker_url
    });

您應該在瀏覽器控制台中檢查其他運行時錯誤