Google Karte funktioniert nicht mit API

Ich bette Google Map in mein Projekt ein, aber es funktioniert nicht. Ich habe den gleichen Code für ein vorheriges Projekt verwendet und es funktioniert gut. Wenn ich überprüfte es Konsole zeigt einen Fehler "TypeError: a ist null".Google Karte funktioniert nicht mit API

Dies ist mein Code

<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>

Dies ist der Fehler ich bekam

Fiddle https://jsfiddle.net/coder_303/stmgLdby/

geschätzt Jede Hilfe wäre.

Quelle

2016-11-29 ub_303

können Sie die genaue Fehlermeldung einfügen? Auf welche Linie bezieht es sich? – xShirase

Ihr Rückruf scheint überhaupt nicht zu funktionieren. Vielleicht fügen Sie ein JFiddle oder ähnliches hinzu. – Tommie

@ xShirase, Es scheint Zeile 88, col 77, ich aktualisierte mit Fehler screenshot. –

Sie diese neue Projekt/neue Anwendung registrieren haben ein "map_wrapper" HTML-Element. Aber in Ihrem Code verwenden Sie "map_canvas". Diese müssen übereinstimmen. Ändere das eine zum anderen.

Das funktioniert, ich habe nicht viel geändert.

Ich habe ein paar Zeilen kommentiert (wie das Symbol, das ich nicht habe), fühlen Sie sich frei, sie zurück zu setzen.

Ich tauschte auch Ihr vier „Westminster Abbey“ Artikel für etwas passend zu dem Marker

<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>

Quelle

2016-11-29 14:14:40

Es gibt noch andere Probleme mit der Geige. – geocodezip

Ja, ich bemerkte, ich suche weiter –

https://jsfiddle.net/stmgLdby/4/ – geocodezip

Wahrscheinlich müssen Sie in Google api manager

Quelle

2016-11-29 12:41:15

Ich habe diesen Link verwendet, um einen API-Schlüssel zu generieren, https://developers.google.com/maps/documentation/javascript/get-api-key?authuser=1, ist das genug? –

Auch Sie müssen Google Maps API-Schlüssel mit diesem neu generierten Schlüssel in Ihrem aktuellen Projekt ersetzen. –

Google Karte funktioniert nicht mit API

Antwort

Verwandte Themen