Ich habe einige dieser Fehler hier verstreut gesehen, aber nachdem ich mir die Antworten angesehen habe, habe ich noch keine Lösung gefunden, die hier funktioniert. Alles scheint gut zu funktionieren, bis ich den eventListener für ‘click’ hinzufüge, um ein infoWindow zu öffnen, was der Fall ist, wenn ich die folgende Fehlermeldung in der Konsole erhalte:
Eigenschaft ‘__e3_’ von undefined kann nicht gelesen werden
Irgendwelche Ideen, was diesen Fehler verursacht?
Beachten Sie, dass ich weit davon entfernt bin, ein Experte für die Verwendung von Google Maps zu sein, also denken Sie bitte bei allen Antworten daran 🙂
<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>
Mögliches Duplikat der Google Maps-API: Eigenschaft „__e3_“ von undefiniert kann nicht gelesen werden
– Rax Weber
11. Oktober 2016 um 9:42 Uhr
@RaxWeber Ich sehe nicht, wie dies ein Duplikat ist. Wie bereits erwähnt, scheint alles gut zu funktionieren, bevor der Click-Event-Listener hinzugefügt wird (dh alle Markierungen werden korrekt angezeigt), soweit ich das beurteilen kann, wird er korrekt initialisiert.
– wickywills
11. Oktober 2016 um 9:55 Uhr