Hey guys,
Just wondering if you can pls have a look at my Google Map at:
Having couple of issues with it…
First issue is I can’t make the close button to be visible when clicking the pin locations.
Also my Google Maps plus and minus toggle on the left is not displaying correctly. Do you know what usually causes this bug?
My Javascript code is
<!-- Google Maps -->
<div class="google-map">
<div id="googlemaps" class="google-map google-map-full" style="width:100%; height:325px"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.gmap.js"></script>
<script>
/*
Map Settings
Find the Latitude and Longitude of your address:
- http://universimmedia.pagesperso-orange.fr/geo/loc.htm
- http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/
*/
// Map Markers
var mapMarkers = [{
address: "Unit 4 / 190 Abernethy Rd, Belmont WA 6104",
html: "<strong>Head Office - Perth</strong><br><strong>Unit 4 / 190 Abernethy Rd, Belmont WA 6104</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -31.957626, longitude: 115.929654, zoom: 16}, event)'>[+] Zoom Here</a>",
icon: {
image: "images/pin.png",
iconsize: [26, 46],
iconanchor: [12, 46]
}
},{
address: "8 Turee Way, Paraburdoo WA 6754",
html: "<strong>Paraburdoo Office - Paraburdoo</strong><br><strong>8 Turee Way Paraburdoo WA 6754</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -23.205040, longitude: 117.654366, zoom: 16}, event)'>[+] Zoom Here</a>",
icon: {
image: "images/pin.png",
iconsize: [26, 46],
iconanchor: [19, 46]
}
},{
address: "Lot4/ Mine Rd, Tom Price WA 6751",
html: "<strong>Tom Price Office - Tom Price</strong><br><strong>Lot4/ Mine Rd, Tom Price WA 6751</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -22.708424, longitude: 117.775175, zoom: 16}, event)'>[+] Zoom Here</a>",
icon: {
image: "images/pin.png",
iconsize: [26, 46],
iconanchor: [12, 46]
}
}];
// Map Initial Location
var initLatitude = -26.030257;
var initLongitude = 115.929654;
// Map Extended Settings
var mapSettings = {
controls: {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
},
scrollwheel: true,
markers: mapMarkers,
latitude: initLatitude,
longitude: initLongitude,
zoom: 5
};
var map = $("#googlemaps").gMap(mapSettings);
// Map Center At
var mapCenterAt = function(options, e) {
e.preventDefault();
$("#googlemaps").gMap("centerAt", options);
}
</script>
</div>
<!-- Google Maps End -->