I have integrated the Google Maps JS API into a WordPress website and added a map to the contact page template. However, I am experiencing some strange behavior where the Zoom In and Zoom Out button style is not displaying as + and -. Does anyone have any suggestions on how to get the default buttons back? Check out the Google Map Codes on JS Fiddle
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoom: <?php echo $map_zoom;?>,
zoomControl: true,
scrollwheel: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.DEFAULT
},
panControl: false,
streetViewControl: false,
scaleControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var infoContent = 'Your content goes here';
var infowindow = new google.maps.InfoWindow({
content: infoContent
});
var icon = {
path: 'Your icon path here',
anchor: new google.maps.Point(16.5, 51),
fillColor: '<?php echo $map_marker_colour;?>',
fillOpacity: 0.6,
strokeWeight: 0,
scale: 1
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>),
map: map,
icon: icon,
title: 'marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);