I’ve inherited a site and picking through some of the console errors i see… the “Uncaught TypeError: window.initialize is not a function” is coming from the google maps api, i am not knowledgeable in javascript so im not sure whats going on at all. Here’s the code that calls the map…
<script> window.mapalldata=<?php echo json_encode($map_data)?>;</script>
<script type="application/javascript">
iBox = [];
jQuery(function ($) {
var image = '<?php echo get_template_directory_uri(); ?>/assets/images/office-pin.png';
var map = null;
var markerArray = [];
window.initialize = function () {
var bounds = new google.maps.LatLngBounds();
latitudes = [];
longitudes = [];
artBox = window.mapalldata;
pindata = [];
points = [];
jQuery.each(artBox, function (key, val) {
if(latitudes.includes(val.lat) && longitudes.includes(val.lng)){
val.lat = val.lat + (Math.random() - 0.5) / 1500;// * (Math.random() * (max - min) + min);
val.lng = val.lng + (Math.random() - 0.5) / 1500;// * (Math.random() * (max - min) + min);
}
latitudes.push(val.lat)
longitudes.push(val.lng)
pindata.push({'title': val.title});
points.push(val);
})
bounds.extend(new google.maps.LatLng(Math.max.apply(Math, latitudes) + 1, Math.max.apply(Math, longitudes)));
bounds.extend(new google.maps.LatLng(Math.min.apply(Math, latitudes) - 1, Math.min.apply(Math, longitudes)));
if (map == null) {
var gmapdiv;
gmapdiv = document.createElement('div');
gmapdiv.id = 'level10_gmapid-canvas';
gmapdiv.style.width = '100%';
gmapdiv.style.height = '700px';
document.getElementById('gmap_canvas').appendChild(gmapdiv);
var mapOptions = {
zoom: 10,
scrollwheel: false,
mapTypeControl: true,
scaleControl: true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.DEFAULT},
overviewMapControl: true,
center: bounds.getCenter(),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('level10_gmapid-canvas'), mapOptions);
}
if (markerArray) {
jQuery.each(markerArray,function(key,value){
value.setMap(null);
})
markerArray = [];
}
var len = latitudes.length;
jQuery.each(points, function (key, val) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(val.lat)-0.0014, parseFloat(val.lng)),
map: map,
icon: image
});
markerArray.push(marker);
window.attachMessege(map, marker, val);
})
var clusterStyles = [
{
textColor: 'white',
url: '<?php echo get_stylesheet_directory_uri()?>/assets/images/ico-region-map.png',
height: 85,
width: 85
}
];
var mcOptions = {
styles: clusterStyles,
};
var markerCluster = new MarkerClusterer(map, markerArray, mcOptions);
if (len > 1) {
map.fitBounds(bounds);
} else {
map.setCenter(markerArray[0].getPosition());
map.setZoom(15);
}
jQuery(document).on("contentUpdate", function (e) {
jQuery.each(iBox, function () {
this.hide();
});
});
var ib;
var currCenter = bounds.getCenter();
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(currCenter);
});
}
window.attachMessege = function (map, marker, data) {
myHtml =
'<div class="b-marker-map" >' +
'<div class="b-box-marker">' +
'<div class="holder">' +
'<div class="block">' +
'<a href="' + data.link + '" class="image">'+
data.img +
'</a>' +
'<div class="info-content">' +
'<h5>' + data.client + '</h5>'+
'<p>' + data.title + '</p>' +
'<p>' + data.geo + '</p>' +
'<a href="' + data.link + '" class="link-arrow">View Project</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var boxText = document.createElement("div");
boxText.innerHTML = myHtml;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
alignBottom: true,
pixelOffset: new google.maps.Size(-65, -32),
zIndex: null,
closeBoxMargin: "0",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false,
};
var ib = new InfoBox(myOptions);
iBox.push(ib);
google.maps.event.addListener(map, "click", function (e) {
var ib_length = iBox.length;
for (i = 0; i < ib_length; i++) {
if (iBox[i].getPosition()) {
iBox[i].close();
}
}
});
google.maps.event.addListener(marker, "click", function (e) {
var ib_length = iBox.length, _pp = this.position;
for (i = 0; i < ib_length; i++) {
// var curpoint = iBox[i].getPosition();
// if (_pp.k != curpoint.k && _pp.D != curpoint.D) {
iBox[i].close();
// }
}
//map.panTo(this.getPosition());
ib.open(map, marker);
});
// google.maps.event.addListener(marker, "mouseout", function (e) {
// mouseOutsideInfowindow();
// });
var styles = [{"featureType":"administrative","elementType":"labels.text","stylers":[{"saturation":"-17"},{"lightness":"21"},{"gamma":"1.16"},{"weight":"2.35"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"gamma":"1"},{"lightness":"100"},{"color":"#ffffff"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#f2f2f2"},{"visibility":"on"}]}];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
});
function mouseOutsideInfowindow(){
var ib_length = iBox.length, _pp = this.position;
for (i = 0; i < ib_length; i++) {
iBox[i].close();
}
}
jQuery('.buttons a.map').on('click', function (e) {
if( jQuery('#gmap_canvas').is(':empty') ) {
// jQuery('#gmap_canvas').empty();
window.initialize();
}
});
</script>
theres also all this code being displayed below the area that i imagine is bc of the javascript error, heres an image of it…
screenshot of code being displayed on front end
Any help would be great the client would like to not completely remove the map, as its used to search for projects, my guess based on other errors i’ve found is that its dated javascript, but like i said i dont know javascript so im not sure… heres the page https://www.level10gc.com/projects/
Thank you.