未定義のプロパティ '__e3_'を読み取れません
これらのエラーのいくつかがここに点在しているのを見ましたが、答えを見ても、ここで機能する解決策をまだ見つけていません。 「クリック」するためのeventListenerを追加してinfoWindowを開くまでは、すべて正常に動作しているようです。これは、コンソールで次のエラーを受け取ったときです。
未定義のプロパティ '__e3_'を読み取れません
このエラーの原因は何ですか？
私はGoogleマップを使用する専門家とはほど遠いので注意してください。
<div class="acf-map c-location-map" style="width: 100%; height: 700px;">
<?php
// Get a list of all offices, we need their IDs to get their locations for use with the Google map.
$stockistList = get_posts(array(
'posts_per_page' => -1,
'post_type' => 'stockist',
));
if (!empty($stockistList))
{
foreach ($stockistList as $singleStockist)
{
// Create a simple div that shows the map working correctly.
printf('<div class="c-location-map__marker marker" data-country="%s">
<h4>%s</h4>
</div>',
get_field('stockist_country', $singleStockist->ID),
$singleStockist->post_title
);
}
}
?>
<!-- .c-location-map --></div>
<script type="text/javascript">
(function($) {
/**
* Creates a new Google Map using the markers on the page.
*/
function ts_newMap($el)
{
var $markers = $el.find('.marker');
// Settings
var args = {
zoom : 3,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,
scrollwheel : false,
styles : [{"featureType":"all","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"all","elementType":"geometry","stylers":[{"color":"#0025f0"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"visibility":"simplified"},{"color":"#2d3a6d"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"gamma":0.01},{"lightness":20}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"saturation":-31},{"lightness":-33},{"weight":2},{"gamma":0.8}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"lightness":30},{"saturation":30},{"visibility":"simplified"},{"color":"#636363"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"color":"#636363"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":20}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"lightness":20},{"saturation":-20}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#636363"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":10},{"saturation":-30}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"saturation":25},{"lightness":25}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#636363"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"lightness":-20},{"visibility":"simplified"},{"color":"#efefed"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]}]
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function() {
ts_newMapMarker($(this), map);
});
// Centre the map based on what pins have been added.
ts_mapCentre(map);
// return
return map;
}
/**
* Adds an individual marker to the map.
*/
function ts_newMapMarker($marker, map)
{
var marker;
var dataCountry = $marker.attr('data-country');
console.log("Country: " + dataCountry);
geocoder = new google.maps.Geocoder();
function getCountry(country) {
geocoder.geocode( { 'address': country }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon : '<?php bloginfo('template_url'); ?>/assets/images/map-marker.png'
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
map.markers.Push( marker );
getCountry(dataCountry);
// if marker contains HTML, add it to an infoWindow
if($marker.html())
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
console.log("open info window");
infowindow.open( map, marker );
});
}
}
/**
* Centres the map based on what's been added to it.
*/
function ts_mapCentre(map)
{
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function(i, marker)
{
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(8);
}
else {
// fit to bounds
map.fitBounds(bounds);
}
}
/**
* Build the map now the page is ready.
*/
var map = null;
$(document).ready(function()
{
$('.acf-map').each(function()
{
// create map
map = ts_newMap($(this));
});
});
})(jQuery);
</script>
呼び出し
geocoder.geocode( { 'address': country }, function(results, status) { ..
非同期、つまりライン
google.maps.event.addListener(marker, 'click', function() {
行の前に呼び出されます
marker = new google.maps.Marker({ ..
ts_newMapMarkerで呼び出されます。したがって、markerは、イベントリスナーを追加する時点では存在しません。どういうわけかコードを再配置する必要があるので、マーカーが初期化された後にリスナーを追加します。例：
function ts_newMapMarker($marker, map)
{
var marker;
var dataCountry = $marker.attr('data-country');
console.log("Country: " + dataCountry);
geocoder = new google.maps.Geocoder();
function getCountry(country) {
geocoder.geocode( { 'address': country }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon : '<?php bloginfo('template_url'); ?>/assets/images/map-marker.png'
});
map.markers.Push( marker );
getCountry(dataCountry);
// if marker contains HTML, add it to an infoWindow
if($marker.html())
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
console.log("open info window");
infowindow.open( map, marker );
});
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
私の場合google.maps.event.addListener(marker, 'click', function() {マーカー変数は未定義でした。そしてそれゆえエラー。誰かに役立つかもしれません。