JSON Google map Layer dropdown push data
JSON Google map Layer dropdown push data
HTML
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map">
<div id="category_panel">
category:<select id="category">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
</div>
CSS
html, body, #map {
width: 100%;
height: 100%;
padding : 0;
margin : 0;
}
#category_panel {
background-color : white;
padding : 1px;
font-size : 13px;
margin-top : 5px;
border : 1px solid #aaa;
}
JavaScript
(function() {
var clusterer;
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng(30.033591, -36.035156),
zoom : 3,
mapTypeId : google.maps.MapTypeId.TERRAIN,
noClear : true
});
var selectDiv = $("#category_panel")[0];
map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);
// Creating the JSON data
var json = [
{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "simplified" },
{ "saturation": -75 },
{ "color": "#e2eaf4" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "simplified" }
]
},{
"featureType": "landscape",
"stylers": [
{ "color": "#a9c7ec" }
]
},{
},{
"featureType": "poi.park",
"stylers": [
{ "color": "#7ba4d6" },
{ "visibility": "off" }
]
},{
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#1d5aa6" }
]
},{
"elementType": "labels.text.stroke",
"stylers": [
{ "color": "#ffffff" },
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#e2eaf4" }
]
},{
"featureType": "administrative",
"elementType": "labels.icon",
"stylers": [
{ "color": "#ffffff" }
...