In the sidebar we have put:
<div id="map" class="et_pb_map" style="height:500px !important;width:350px !important";></div>
and in the header:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var red_icon = new google.maps.MarkerImage("https://maps.gstatic.com/mapfiles/ms2/micons/red.png");
red_icon.size = new google.maps.Size(35, 35);
red_icon.anchor = new google.maps.Point(0, 35);
var yellow_icon = new google.maps.MarkerImage("https://maps.gstatic.com/mapfiles/ms2/micons/yellow.png");
yellow_icon.size = new google.maps.Size(35, 35);
yellow_icon.anchor = new google.maps.Point(0, 35);
var markers = [];
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
function initialize() {
var locations = [
{
name: 'The Sabbatical',
position: {
lat: 48.9297,
lng: -125.53667
}
},
{
name: 'Happy Cabin',
position: {
lat: 48.92794,
lng: -125.5379
}
},
{
name: 'Surf Loft',
position: {
lat: 48.93033,
lng: -125.53568
}
},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: locations[0].position,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
for(i in locations) {
console.log(locations[i]);
markers[i] = new google.maps.Marker({
position: locations[i].position,
map: map,
title: locations[i].name,
icon: red_icon
});
bounds.extend(markers[i].getPosition());
google.maps.event.addListener(markers[i], "click", function() {
infowindow.setContent(this.title);
infowindow.setPosition(this.getPosition());
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
var tables = [
'sab2b',
'sab1b',
'happycabin',
'SurfLoft'
];
for(j in tables) {
var element = document.getElementById("tablepress-"+tables[j]);
if(j == 1) {
element.setAttribute('marker', 0);
} else {
element.setAttribute('marker', j);
}
element.onmouseover = function () {
var marker = this.getAttribute('marker');
markers[marker].setIcon(yellow_icon);
};
element.onmouseout = function () {
var marker = this.getAttribute('marker');
markers[marker].setIcon(red_icon);
};
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
