0
私のプロジェクトにGoogleマップを埋め込んでいますが、動作していません。私は以前のプロジェクトに同じコードを使用し、うまくいきました。私がコンソールにチェックを入れると、 "TypeError：a is null"というエラーが表示されます。Googleマップはapiと連携していません
これは、これは誤りである私のコード
<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/
任意の助けいただければ幸いました。
をマッチング何かのためのあなたの4つの「ウェストミンスター修道院」の項目を入れ替え？どの行がそれを参照していますか？ – xShirase
あなたのコールバックはまったく動作していないようです。たぶん、jsfiddleなどを追加してください。 – Tommie
@ xShirase、それは88行、77列と思われますが、私はエラーのスクリーンショットで更新しました。 –