Struggling to style my Google Map this week - I have the JSON values but no clue how to add them into the JavaScript. Also, need to move the zoom bar control to the right instead of it being hidden behind site content on the left.
Any help would be greatly appreciated!
:)
The JSON values I want to include are:
[ { stylers: [ { saturation: -90 }, { gamma: 0.87 } ] } ]
Here's the current code for my map:
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instance
// of the "marker" and "html" variables which will be needed later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(50.826910965853585, -0.13648152351379395), 16);
// Set up the markers with info windows
var point = new GLatLng(50.826910965853585, -0.13648152351379395);
var marker = createMarker(point,'<div style="width:300px">text for pop up here....</div>')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>