Trying to make dynamic changes in the style of a Google Maps using checkboxes. Some checkboxes control colors of features, while others control visibility. Having trouble figuring out how to combine different features of styles since they are not strings.
Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(50.450, 30.522);
myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions)
}
//checkbox operation
$(window).load(function(){
$(document).ready(function () {
$('input[type=checkbox]').change(function () {
var checked = $(this).prop('checked');
var selected = $("input:checked").map(function(i,el){return el.value}).get();
//Display result in HTML
document.getElementById("SHOW").innerHTML = selected;
});
});
});
</script>
<body onload="initialize()">
<div id="map-canvas" style="width:500px;height:300px"></div>
Clear Labels<input type="checkbox" id="chkLbl" value='{"elementType": "labels", "stylers": [ { "visibility": "off" }]}'>
<br>Clear Borders<input type="checkbox" id="chkBrd" value='featureType: "all",elementType:"geometry.stroke",stylers:[{ visibility:"on"}]'>
<br>Change Water<input type="checkbox" id="chkBrd" value='{"featureType": "water", "stylers": [ { "visibility": "off" }]}'>
<p id="SHOW"></p>
</body>
</html>