My custom markers aren’t coming up on a google map on my WordPress site. I’ve reviewed the code for bugs and I’ve seen the following error in the console: (index):573 Uncaught ReferenceError: myMarkers is not defined at initialize however I have another site with nearly the same exact code that is working fine and so I can’t figure out why myMarkers is not defined. I’ve tried rearranging the code to no avail. Has anyone seen this before? Thanks!
Map is at the bottom of the page here: https://excelsportspt.com/
Here is the code:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtKFXFKTieXTdke5jGk_KxZE6FYEADYxg"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function() {
<?php if (have_rows('location_map', 'options')): ?>
//set up markers
myMarkers = {"markers": [
<?php while (have_rows('location_map', 'options')): the_row();
$loclatitude = get_sub_field('address_latitude', 'options');
$loclongitude = get_sub_field('address_longitude', 'options');
$locname = get_sub_field('address_name', 'options');
$locadd = get_sub_field('address', 'options');
$locmap = get_sub_field('loc_map_url');
?>
{
'latitude': '<?= $loclatitude; ?>',
'longitude': '<?= $loclongitude; ?>',
'icon': '<?= esc_url(get_template_directory_uri()); ?>/images/map-pin.png',
'balloon_text': '<a target="_blank" href="<?= $locmap; ?>"><?= $locname; ?></a>'
},
<?php endwhile; ?>
]}
<?php endif; ?>
map = '';
function initialize() {
var myOptions = {
center: new google.maps.LatLng(38.7234409, -90.6383197),
zoom: 10,
};
map = new google.maps.Map(document.getElementById('map1'), myOptions);
setMarkers(map,myMarkers.markers);
}
function setMarkers(map,markers) {
var marker, i;
for (i = 0; i < markers.length; i++) {
var lat = markers[i].latitude;
var long = markers[i].longitude;
var content = markers[i].balloon_text;
var icon = markers[i].icon;
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: content,
position: latlngset,
icon: icon
});
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'click', (function (marker,content,infowindow) {
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
jQuery(document).on('click', '.map-open', function(event) {
event.preventDefault();
map.setCenter(
new google.maps.LatLng(jQuery(this).data('lat'), jQuery(this).data('long'))
);
});
});
</script>
<div class="location-map" id="map1"></div>