Apparently, some of these errors were dotted here, but, looking at the answers, I have not yet found a solution that works here. Everything seems to work fine until I add to the eventListener for 'click' to open the info window that appears when I get the following error in the console:
Unable to read property '__e3_' undefined
Any ideas as to what causes this error?
Note that I'm far from a specialist in using Google Maps, so please keep this in mind with any answers :)
<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 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>