堆棧內存溢出
  簡體   English   中英

Google Map不適用於api

[英]Google map is not working with api

 原文  2016-11-29 12:28:58  2   2    javascript/ php/ html/ google-maps/ google-maps-api-3

問題描述

我將google map嵌入到我的項目中，但是不起作用 我在以前的項目中使用了相同的代碼，因此效果很好。 當我檢查控制台時，它顯示錯誤“ TypeError：a為null”。

這是我的代碼 

<script>

  jQuery(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCcgSw6pOY1_1t4LpPQK360V0reIfLDOi0&callback=initialize"; 
document.body.appendChild(script);
});




function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    maxZoom: 4,
    minZoom: 2,
    navigationControl: false,
     scrollwheel: false,
    mapTypeControl: false,
    draggable: true,
    mapTypeId: 'roadmap',
    styles: [
        {elementType: 'geometry', stylers: [{color: '#F7F7F7'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#F7F7F7'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#BCD9E1'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#b9b9b9'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#b9b9b9'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#BCD9E1'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#BCD9E1'}]
        }
      ]



};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);





// Multiple Markers
var markers = [
    ['The lux belle mare mauritius', -20.199581,57.777157],
    ['Le Touessrok, Trou d Eau Douce, Mauritius, Africa', -20.253906,57.797150],
    ['One & Only Le Saint Géran, Poste de Flacq, Mauritius ', -20.167420, 57.748791],
    ['SLS Hotel, a Luxury Collection Hotel, Beverly Hills, 465 La Cienega Boulevard, Los Angeles, CA 90048, United States', 34.070124, -118.376919],
    ['The Ritz-Carlton, Naples, 280 Vanderbilt Beach Road, Naples, FL 34108, United States', 26.251983, -81.821339],
    ['Raffles Hotel Le Royal, 92 Rukhak Vithei Daun Penh, Sangkat Wat Phnom, Phnom Phen City, Cambodia', 11.584848, 104.917748],
   ['Fitness Centre at the Westin Bund Center Shanghai China, Shanghai, Huangpu, Henan Middle Road, 88號郵政編碼: 200002', 31.234083, 121.490738],
    ['Four Seasons Hotel Hong Kong, 8 Finance Street, Central, Hong Kong', 22.286638, 114.156595],
   ['Shangri-La Hotel, Bangkok, Thailand, Asia', 13.726240, 100.526799],
   ['Sandy Lane, Barbados, Caribbean, Caribbean', 13.175289, -59.631949],
   ['Hotel Weisses Rössl Kitzbühel, Bichlstraße 5, 6370 Kitzbühel, Austria', 47.445422, 12.392272],
    ['Palais Hansen Kempinski Vienna, Schottenring 24, 1010 Wien, Austria', 48.216315, 16.368510],
    ['Buddha Bar Hotel, Paris, France, Europe', 48.869470, 2.320856],
   ['The Gritti Palace, a Luxury Collection Hotel, Venice, Campo Santa Maria del Giglio, 30124 Venice, Italy', 45.434068, 12.334472],
    ['Marbella Club, Avenida Bulevar Príncipe Alfonso de Hohenlohe, s/n, 29602 Marbella, Málaga, Spain', 36.508088, -4.915246],
    ['Belmond La Residencia, Son Canals, s/n, 07179 Deià, Illes Balears, Spain', 39.747939, 2.648374],
    ['The St. Regis Mardavall Mallorca Resort, Carretera Palma-Andratx 19, 07181 Mallorca, Illes Balears, Spain', 39.551222, 2.569334],
    ['Hotel Mirador de Dalt Vila, Plaça d Espanya, 4, 07800 Eivissa, Illes Balears, Spain', 38.907129, 1.437682],
    ['Formentor, a Royal Hideaway Hotel, Carrer Zona Formentor, 07470 Port de Pollença, Illes Balears, Spain', 39.910022, 3.096020],
    ['Jumeirah Carlton Tower, 1 Cadogan Place, London SW1X 9PY, United Kingdom', 51.498340, -0.158965],
    ['Shangri-La Hotel, At The Shard, London, 31 Saint Thomas Street, London SE1 9QU, United Kingdom', 51.504497, -0.158965],
    ['The Ritz London, 150 Piccadilly, London W1J 9BR, United Kingdom', 51.504449, -0.086548],
    ['The May Fair, Stratton Street, London W1J 8LT, United Kingdom',51.507226, -0.143534],
    ['Le Méridien Piccadilly, 21 Piccadilly, London W1J 0BH, United Kingdom',51.509481, -0.136247],
    ['Royal Cres, Bath BA1 2LR, UK',51.387264, -2.368169],
   ['Padstow Townhouse, 16-18 High Street, Padstow PL28 8BB, United Kingdom',50.541948, -4.943169],
    ['One&Only Royal Mirage - Dubai - United Arab Emirates',25.204849, 55.270783],
    ['Burj Al Arab Jumeirah - 3 شارع جميرة - Dubai - United Arab Emirates',25.204849, 55.270783],
    ['Armani Hotel Dubai - Lobby Level,Burj Khalifa,Burj Khalifa Area, Downtown Dubai - Dubai - United Arab Emirates',25.194985, 55.278414],

];

// Info Window Content
var infoWindowContent =[

    ['<div class="info_content">' +
    '<h3>The Lux</h3>' +
    '<p>Belle Mare, Mauritius, Africa</p>' +  

     '</div>'],


    ['<div class="info_content">' +
    '<h3>Le Touessrok</h3>' +
    '<p>Trou d Eau Douce, Mauritius</p>' +  
     '<p> Africa</p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>One & Only Le Saint Géran</h3>' +
    '<p>Poste de Flacq, Mauritius</p>' +  

     '</div>'],

    ['<div class="info_content">' +
    '<h3>SLS Hotel,</h3>' +
    '<p>a Luxury Collection Hotel, Beverly Hills,</p>' + 
     '<p>465 La Cienega Boulevard, Los Angeles,   </p>' + 
     '<p>  CA 90048, United States.  </p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>The Ritz-Carlton,</h3>' +
    '<p> Naples, 280 Vanderbilt Beach Road,</p>' +  
     '<p> Naples, FL 34108, United States </p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>Raffles Hotel Le Royal,</h3>' +
    '<p> 92 Rukhak Vithei Daun Penh, </p>' +  
     '<p>Sangkat Wat Phnom,   </p>' + 
     '<p>Phnom Phen City, Cambodia.  </p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Fitness Centre at the Westin Bund Center Shanghai China,</h3>' +
    '<p> Shanghai, Huangpu,</p>' +  
     '<p> Henan Middle Road,</p>' + 
     '<p> 88號郵政編碼: 200002.   </p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Four Seasons Hotel Hong Kong, </h3>' +
    '<p> 8 Finance Street, </p>' +  
     '<p> Central, Hong Kong.</p>' + 

     '</div>'],

     ['<div class="info_content">' +
    '<h3>Shangri-La Hotel,</h3>' +
    '<p>  Bangkok,</p>' +  
     '<p> Thailand, Asia</p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>Sandy Lane,</h3>' +
    '<p>  Barbados, Caribbean,</p>' +  
     '<p>  Caribbean.</p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>Hotel Weisses Rössl Kitzbühel,</h3>' +
    '<p>  Bichlstraße 5, </p>' +  
     '<p>6370 Kitzbühel,   </p>' + 
     '<p>Austria </p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Palais Hansen Kempinski Vienna,</h3>' +
    '<p>  Schottenring 24,  </p>' +  
     '<p>1010 Wien,    </p>' + 
     '<p>Austria </p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Buddha Bar Hotel,</h3>' +
    '<p>  Paris, France, </p>' +  
     '<p> Europe</p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>The Gritti Palace,</h3>' +
    '<p>  a Luxury Collection Hotel, </p>' +  
     '<p> Venice, Campo Santa Maria del Giglio, </p>' + 
     '<p> 30124 Venice, Italy.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Marbella Club, </h3>' +
    '<p>Avenida Bulevar Príncipe Alfonso de Hohenlohe,</p>' +  
     '<p> s/n, 29602 Marbella,  </p>' + 
     '<p>  Málaga, Spain.</p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Belmond La Residencia, </h3>' +
    '<p>Son Canals,</p>' +  
     '<p> s/n, 07179 Deià, </p>' + 
     '<p>  Illes Balears, Spain.</p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Belmond La Residencia, </h3>' +
    '<p>Son Canals,</p>' +  
     '<p> s/n, 07179 Deià, </p>' + 
     '<p>  Illes Balears, Spain.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Hotel Mirador de Dalt Vila,  </h3>' +
    '<p>Plaça d Espanya, 4,</p>' +  
     '<p>  07800 Eivissa, </p>' + 
     '<p>  Illes Balears, Spain.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Formentor, a Royal Hideaway Hotel, </h3>' +
    '<p> Carrer Zona Formentor,</p>' +  
     '<p>  07470 Port de Pollença,</p>' + 
     '<p>   Illes Balears, Spain</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Jumeirah Carlton Tower, </h3>' +
    '<p>  1 Cadogan Place, </p>' +  
     '<p> London SW1X 9PY,</p>' + 
     '<p>  United Kingdom.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>Shangri-La Hotel, </h3>' +
    '<p> At The Shard, London, </p>' +  
     '<p>31 Saint Thomas Street,  </p>' + 
     '<p> London SE1 9QU, United Kingdom.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>The Ritz London, </h3>' +
    '<p> 150 Piccadilly,</p>' +  
     '<p> London W1J 9BR,  </p>' + 
     '<p> United Kingdom.</p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>The May Fair, </h3>' +
    '<p>  Stratton Street, </p>' +  
     '<p> London W1J 8LT,  </p>' + 
     '<p>  United Kingdom.</p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Le Méridien Piccadilly,  </h3>' +
    '<p> 21 Piccadilly, </p>' +  
     '<p> London W1J 0BH,  </p>' + 
     '<p>  United Kingdom.</p>' + 
     '</div>'],

    ['<div class="info_content">' +
    '<h3>Royal Cres,  </h3>' +
    '<p> Bath BA1 2LR, UK </p>' +  
    '</div>'],

    ['<div class="info_content">' +
    '<h3>Padstow Townhouse,  </h3>' +
    '<p> 16-18 High Street, </p>' +  
     '<p>Padstow PL28 8BB,  </p>' + 
     '<p> United Kingdom.</p>' + 
     '</div>'],

     ['<div class="info_content">' +
    '<h3>One&Only Royal Mirage, </h3>' +
    '<p> Dubai,  </p>' +  
     '<p> United Arab Emirates.  </p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>Burj Al Arab Jumeirah , </h3>' +
    '<p>Dubai  </p>' +  
     '<p>United Arab Emirates  </p>' + 

     '</div>'],

    ['<div class="info_content">' +
    '<h3>Armani Hotel Dubai - Lobby Level, </h3>' +
    '<p> Burj Khalifa,Burj Khalifa Area,</p>' +  
     '<p> Downtown Dubai, </p>' + 
     '<p> Dubai, United Arab Emirates </p>' + 
     '</div>'],

];

// Display multiple markers on a map

var infoWindow =   new google.maps.InfoWindow(), marker, i;


// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    var image = 'http://www.luxuryhotelexpert.com/wp-content/uploads/2016/11/map-marker.png';
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: image,
        title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(2);

    google.maps.event.removeListener(boundsListener);
});

}



    </script>

這是我得到的錯誤 在此處輸入圖片說明

小提琴 https://jsfiddle.net/coder_303/stmgLdby/

任何幫助，將不勝感激。

2 個解決方案

解決方案1
 2 已采納  2016-11-29 14:14:40

您有一個“ map_wrapper” HTML元素。 但是在您的代碼中，您使用了“ map_canvas”。 這些必須匹配。 換一個。

這行得通，我並沒有太大改變。

我確實注釋了幾行（例如我沒有的圖標），可以隨時將它們放回去。

我還將您的四個“威斯敏斯特大教堂”項目換成與標記物匹配的項目 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="map_wrapper"></div>
<style>
#map_wrapper {
  height: 300px;
  width: 500px;
  border: 1px solid #666666;
}
</style>
<script>
jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  //script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCcgSw6pOY1_1t4LpPQK360V0reIfLDOi0&callback=initialize"; 
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize"; 
  document.body.appendChild(script);
});
function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
  maxZoom: 4,
  minZoom: 2,
  navigationControl: false,
  //scrollwheel: false,
  //mapTypeControl: false,
  //draggable: false,
  mapTypeId: 'roadmap',
  styles: [
    {elementType: 'geometry', stylers: [{color: '#F7F7F7'}]},
    {elementType: 'labels.text.stroke', stylers: [{color: '#F7F7F7'}]},
    {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
    {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{color: '#BCD9E1'}]
    },
    {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{color: '#6b9a76'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [{color: '#38414e'}]
    },
    {
      featureType: 'road',
      elementType: 'geometry.stroke',
      stylers: [{color: '#212a37'}]
    },
    {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{color: '#9ca5b3'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [{color: '#b9b9b9'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{color: '#b9b9b9'}]
    },
    {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{color: '#f3d19c'}]
    },
    {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{color: '#2f3948'}]
    },
    {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{color: '#d59563'}]
    },
    {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{color: '#BCD9E1'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{color: '#515c6d'}]
    },
    {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{color: '#BCD9E1'}]
    }
  ]
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_wrapper"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
  ['Capital Tower, ADNEC Complex Abu Dhabi', 24.299174,54.697277],
  ['Regional Office - Dubai - United Arab Emirates', 25.204849,55.270783],
  ['FUJAIRAH', 21.756779, 58.842773],
  ['EGYPT', 28.822859, 26.674805],
  ['lybia', 30.123591, 16.303711],
];
// Info Window Content
var infoWindowContent =[
['<div class="info_content">' +
'<h3>ABU DHABI HEADQUARTERS</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],

['<div class="info_content">' +
'<h3>Regional Office - Dubai</h3>' +
'<p>Regional Office - Dubai - United Arab Emirates ...</p>' +
'</div>'],

['<div class="info_content">' +
'<h3>FUJAIRAH</h3>' +
'<p>FUJAIRAH ... </p>' +
'</div>'],

['<div class="info_content">' +
'<h3>EGYPT</h3>' +
'<p>EGYPT ...</p>' +
'</div>'],

['<div class="info_content">' +
'<h3>lybia</h3>' +
'<p>lybia...</p>' +
'</div>'],
];
// Display multiple markers on a map
var infoWindow =   new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
var image = 'images/map-marker.png';
bounds.extend(position);
marker = new google.maps.Marker({
    position: position,
    map: map,
    // icon: image,
    title: markers[i][0]
});
// Allow each marker to have an info window    
google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
    }
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
  this.setZoom(2);
  google.maps.event.removeListener(boundsListener);
});
}
</script>

解決方案2
 0  2016-11-29 12:41:15

可能您需要在Google api管理器中注冊此新項目/新應用程序

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Google Map Javascript API不起作用 谷歌地圖API不再工作 角谷歌地圖API不起作用？ Google Map API地理編碼器語言不起作用 Google Map Api和JS代碼不起作用 Google Map API v3在Wordpress中不起作用 谷歌地圖放置API-&gt;區域類型不起作用 具有Google Map API的基本KML無法正常工作 Javascript Angular Google Map自動完成API不起作用 谷歌地圖API示例加載地圖不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM