Google Maps JS埋め込みが動作しない

Question

埋め込みマップとカスタムマーカーを含むクイックウェブサイトを構築しました。 Chromeのパソコンのデスクトップで正常に動作し、Google Pixelで正常に動作しますが、Safari/iPhoneでMacで確認したところ、マップは表示されずレンダリングされません（Chromeで動作）。以下は

はコードのサンプルです：

<div id="oakville-map" class="row map"></div> 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script> 

<script> 
    //Maps   
    var iconBase = '/pathtomarker/markers/red_circle_'; 
    var icons = { 
     one: { 
      icon: iconBase + '1.png' 
     }, 
     two: { 
      icon: iconBase + '2.png' 
     }, 
     three: { 
      icon: iconBase + '3.png' 
     }, 
     four: { 
      icon: iconBase + '4.png' 
     }, 
     five: { 
      icon: iconBase + '5.png' 
     }, 
     six: { 
      icon: iconBase + '6.png' 
     } 
    }; 

    var element = document.getElementById('oakville-map'); 
    if (typeof(element) != 'undefined' && element != null) 
    { 
     //Oakville Map 
     function initMap() { 
      var tmhOakville = {lat: 43.5113563, lng: -79.6873432}; 
      var Oakvillemap = new google.maps.Map(document.getElementById('oakville-map'), { 
       zoom: 13, 
       center: tmhOakville 
      }); 
      var features = [ 
       { 
        position: tmhOakville, 
        type: 'one' 
       } 
      ]; 
      // Create markers. 
      features.forEach(function(feature) { 
       var marker = new google.maps.Marker({ 
       position: feature.position, 
       icon: icons[feature.type].icon, 
       map: Oakvillemap 
       }); 
      }); 
     } 
    } 
</script> 

様々な特定のページ上のマップが、構文のためのブロックは、それらのすべてについて同じである場合、私はいくつかのより多くを持っています。ジオコーディングは必要ありません。カスタムマーカーを単純に埋め込むだけです。

これがsafari/iOSに読み込まれない理由を誰にも見られますか？ありがとう

Answer 1

各ifステートメントがinitMap関数を上書きし、最後のマップだけが読み込まれるという問題がありました。 Chromeでうまくレンダリングされるが、Safari/iOSでは正しくレンダリングされない理由はまだ分かりませんが、関数は最後のif文でのみレンダリングされます。