2017-11-26 1 views
0

일부 내장 된지도와 맞춤 마커가있는 빠른 웹 사이트를 만들었습니다. Chrome의 내 PC 바탕 화면에서 정상적으로 작동하고 Google Pixel에서도 정상적으로 작동하지만 Safari/iPhone에서 내 Mac에서 확인하면지도가 표시되거나 렌더링되지 않습니다 (Chrome에서 작동). 나는 특정 페이지에 다양한 맵 블록의 경우 몇 가지 더있다Google Maps JS Embed가 작동하지 않습니다.

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

하지만 구문은 그들 모두에 대해 동일합니다 : 아래

코드의 샘플입니다. 지오 코딩이 필요하지 않으며 사용자 정의 마커가 포함 된 단순한 임베드입니다.

왜 사파리/iOS에로드되지 않는지 이유를 알 수 있습니까? 감사합니다

+0

ECMAScript 5 인 array.forEach를 사용하고 있음을 알게됩니다. 비교적 새로운 기능입니다. 일부 호환성 문제가 발생할 수 있습니다. 또한 '휴식'이라고 할 때 - 정확히 무엇을 의미합니까? 개발자 콘솔을 확인 했습니까? – barryhunter

+0

@barryhunter by break 나는 컨테이너에서 JS를 렌더링하거나 실행하지 않았지만 내 문제를 해결했다는 것을 의미했습니다. 각 if 문은 initMap 함수를 덮어 씁니다. 따라서 마지막지도 만로드됩니다. 그것이 크롬에서 부서지지 않는 이유 그러나 잘 오 잘. 감사! – abprecious

답변

0

문제는 각 if 문이 initMap 함수를 덮어 써서 마지막 맵만로드된다는 것이 었습니다. 아직도 Chrome에서 제대로 렌더링되지만 Safari/iOS에서는 렌더링되지 않는 이유는 확실하지 않지만이 함수는 마지막 if 문으로 만 렌더링됩니다.

관련 문제