地図では、TypeError：$はワードプレスの機能ではありません

Question

私はウェブサイトにGoogleマップを表示しようとしています。私は埋め込みメソッドを使用したくないので、これをasync deferメソッドを使って使用しました。

私のコードはhtmlファイルでうまく動作しますが、Wordpressで使用すると、TypeError：$が関数エラーではありません。

私はワードプレスで使用されるとき、どのようにhtmlファイルとはTypeErrorには型エラーが来ませんか？

<script> 
    var rating; 
    var address; 
    var name; 
    var infoWindow = null; 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('mapDiv'), { 
     center: {lat: 33.531495, lng: -88.42207}, 
     zoom: 19 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.getDetails({ 
     placeId: 'ChIJJdJXNmjphogRo-W21kkhbJg' 
    }, function(place, status) { 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
     rating = place.rating; 
     name = place.name; 

     //var labelIndex = 50; 
     address = "<div>" + place.formatted_address + "</div>" 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location, 

     }); 

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
      place.formatted_address + '</div>'); 

      infowindow.open(map, marker); 


     google.maps.event.addListener(map, 'idle', function(e) { 

// Prevents card from being added more than once (i.e. when page is resized and google maps re-renders) 
if ($(".place-card").length === 0) { 
$(".gm-style").append('<div style="position: absolute; left: 0px; top: 34px;"> <div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white;"> <div> <div class="place-card place-card-large"> <div class="place-desc-large"> <div class="place-name"></div><div class="image-place"><img id="photoLocation" src="" style="position: static; top: 0px;left: 0px;width: 175px;height: 165px;"></div><div class="address"></div></div><div class="navigate"> <div class="navigate"> <a class="navigate-link" href="https://www.google.com/maps/dir//33.53151,-88.422063/@33.53151,-88.422063,18z" target="_blank"> <div class="icon navigate-icon"></div><div class="navigate-text"> Directions </div></a> </div></div><div class="review-box"> <div id="review-number" class="review-number"></div><a href="http://www.google.co.in/search?q=Porter,+Singley,+%26+Crane+Family+Dentistry,+2900+Bluecutt+Rd+%232,+Columbus,+MS+39705,+EE.+UU.&ludocid=10983190192268436899#lrd=0x8886e9683657d225:0x986c2149d6b6e5a3,1" class="review-box-link" target="_blank">Reviews</a> </div><div class="saved-from-source-link" style="display:none"> </div><div class="maps-links-box-exp"> <div class="time-to-location-info-exp" style="display:none"> <span class="drive-icon-exp experiment-icon"></span><a class="time-to-location-text-exp" style="display:none" target="_blank"></a><a class="time-to-location-text-exp" style="display:none" target="_blank"></a> </div><div class="google-maps-link"> <a href="https://www.google.com.py/maps/place/Porter,+Singley,+%26+Crane+Family+Dentistry/@33.53151,-88.4242517,17z/data=!3m1!4b1!4m5!3m4!1s0x8886e9683657d225:0x986c2149d6b6e5a3!8m2!3d33.53151!4d-88.422063?hl=es-419" target="_blank">View larger map</a> </div></div></div></div>'); 
    //$(".review-number").append(rating); 
    $("#review-number").append(rating); 
     fillCard(place); 
     //function to resize the map, responsive. 
     google.maps.event.addDomListener(window, 'resize', function() { 
      var center = googleMap.getCenter(); 
      google.maps.event.trigger(googleMap, "resize"); 
      googleMap.setCenter(center); 
     }); 
    } 
    }); 


     } 
    }); 
       function fillCard(place){ 
       var photos = place.photos; 
       var countRatig = rating.toString().slice(0,1); 
       $(".address").append(address); 
       $(".place-name").append(name); 
       $("#photoLocation").attr("src", photos[1].getUrl({'maxWidth': 175, 'maxHeight': 138})) 
       for (var i=0; i<countRatig; ++i){ 
        $("#review-number:nth-child(1)").append('<div class="icon rating-star rating-full-star"></div>'); 
       } 
     } 

    } 
</script> 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.