Created
October 23, 2016 15:13
-
-
Save Megafry/a563e9ab4856f66623ef03be3eec7753 to your computer and use it in GitHub Desktop.
Google Map API3 with Custom infowindow and marker + markerclusterer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>GoogleMap</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <style> | |
| #googleMap { | |
| margin: auto; | |
| max-width: 900px; | |
| } | |
| .gm-style-iw-parent { | |
| width: 250px !important; | |
| /*height: 83px !important;*/ | |
| } | |
| .gm-style-iw { | |
| width: 250px !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| border-radius: 2px 2px 0 0; | |
| } | |
| .gm-style-iw + div { | |
| right: -5px !important; | |
| top: -5px !important; | |
| border-radius: 5px !important; | |
| background-color: #ff4b4b !important; | |
| } | |
| .gm-style-iw + div:after { | |
| content: "X"; | |
| color: #fff; | |
| padding: 0 3px; | |
| } | |
| .gm-style-iw + div img { | |
| display: none !important; | |
| } | |
| .mapCard { | |
| width: 240px; | |
| float: left; | |
| overflow: hidden; | |
| background-color: #fff; | |
| border-radius: 4px; | |
| box-shadow: 0 0px 5px rgba(0, 0, 0, 0.6); | |
| min-height: 80px; | |
| margin: 5px; | |
| } | |
| .mapCard img { | |
| float: left; | |
| margin-right: 15px; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .mapCard .text { | |
| display: block; | |
| padding-left: 135px; | |
| word-break: break-word; | |
| padding: 5px; | |
| } | |
| .mapCard h3 { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .gm-style-iw-parent > div:first-child { | |
| top: auto !important; | |
| bottom: 0 !important; | |
| } | |
| .gm-style-iw-parent > div:first-child > div { | |
| top: auto !important; | |
| left: 245px !important; | |
| z-index: 1; | |
| transform: rotate(-90deg) !important; | |
| transform-origin: top left; | |
| bottom: 56px !important; | |
| } | |
| .gm-style-iw-parent > div:first-child > div:first-child{ | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <base href=""> | |
| <body class="dev"> | |
| <div id="googleMap" style="height: 600px;"> | |
| </div> | |
| <!-- Scripts --> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> | |
| <script > | |
| //original code from http://jsfiddle.net/07cwyj6n/ | |
| //var icon = "https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/136/Social_Media_Socialmedia_network_share_socialnetwork_network-14-512.png"; | |
| /* | |
| var icon = { | |
| url: "https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/136/Social_Media_Socialmedia_network_share_socialnetwork_network-14-512.png", // url | |
| scaledSize: new google.maps.Size(30, 30), // scaled size | |
| origin: new google.maps.Point(0,0), // origin | |
| anchor: new google.maps.Point(15, 15) // anchor | |
| }; | |
| */ | |
| var icon = { | |
| path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0", | |
| fillColor: '#FF0000', | |
| fillOpacity: .8, | |
| anchor: new google.maps.Point(0,0), | |
| strokeWeight: 0, | |
| scale: 1, | |
| //anchor: new google.maps.Point(0, 10) // anchor | |
| } | |
| var icon2 = { | |
| path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0", | |
| fillColor: '#FF0000', | |
| fillOpacity: .8, | |
| anchor: new google.maps.Point(0,0), | |
| strokeWeight: 0, | |
| scale: 1.2, | |
| //anchor: new google.maps.Point(0, 10) // anchor | |
| } | |
| var getGoogleClusterInlineSvg = function (color) { | |
| var encoded = window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><defs><radialGradient cy="0.5" cx="0.5" r="0.5" spreadMethod="pad" id="svg_7"><stop offset="0.011719" stop-opacity="0.996094" stop-color="#ffffff"/><stop offset="1" stop-color="'+color+'"/></radialGradient></defs><title>background</title><rect fill="none" id="canvas_background" height="52" width="52" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g><title>Layer 1</title><ellipse stroke="null" fill-opacity="0.51" ry="20.5625" rx="20.5625" id="svg_6" cy="25.000001" cx="25.000001" stroke-width="1.5" fill="url(#svg_7)"/><ellipse stroke="null" fill-opacity="0.51" ry="24.249999" rx="24.249999" id="svg_9" cy="25" cx="25" stroke-width="1.5" fill="url(#svg_7)"/><ellipse stroke="null" ry="16.124999" rx="16.124999" id="svg_10" cy="25" cx="24.999999" stroke-width="1.5" fill="'+color+'"/></svg>'); | |
| return ('data:image/svg+xml;base64,' + encoded); | |
| }; | |
| var cluster_styles = [ | |
| { | |
| width: 50, | |
| height: 50, | |
| url: getGoogleClusterInlineSvg('red'), | |
| textColor: 'white', | |
| textSize: 12 | |
| }, | |
| { | |
| width: 50, | |
| height: 50, | |
| url: getGoogleClusterInlineSvg('#a90000'), | |
| textColor: 'white', | |
| textSize: 14 | |
| }, | |
| { | |
| width: 60, | |
| height: 60, | |
| url: getGoogleClusterInlineSvg('#820000'), | |
| textColor: 'white', | |
| textSize: 16 | |
| } | |
| //up to 5 | |
| ]; | |
| //var json = "http://path/to/universities.json"; | |
| var infowindow = new google.maps.InfoWindow({ | |
| pixelOffset: new google.maps.Size(-140,100), | |
| maxWidth: 250, | |
| }); | |
| function initialize() { | |
| var mapProp = { | |
| center: new google.maps.LatLng(15.0, 0), | |
| zoom: 2, | |
| //scrollwheel: false, | |
| disableDefaultUI: true, | |
| //mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| //styles: googleMapStyle.StyleDark, | |
| }; | |
| map = new google.maps.Map(document.getElementById("googleMap"), mapProp); | |
| //close the map if the user zoom | |
| google.maps.event.addListener(map,'zoom_changed',function(){ | |
| //map.clearMarkers(); | |
| if (infowindow) { | |
| infowindow.close(); | |
| } | |
| }); | |
| // $.getJSON(json, function(json1) { | |
| var json1 = { | |
| "place2": [ | |
| { | |
| "title": "Aberystwyth University", | |
| "website": "http://www.aber.ac.uk", | |
| "image": "https://upload.wikimedia.org/wikipedia/commons/d/dd/Aberystwyth_University,_East_Entrance.jpg", | |
| "lat": 52.415524, | |
| "lng": -4.063066}, | |
| { | |
| "title": "Bangor University", | |
| "website": "http://www.bangor.ac.uk", | |
| "image": "https://www.easyuni.com/media/institution/photo/2014/11/06/Bangor-Business-School.jpg", | |
| "lat": 53.229520, | |
| "lng": -4.129987}, | |
| { | |
| "title": "Cardiff Metropolitan University", | |
| "website": "http://www.cardiffmet.ac.uk", | |
| "image": "http://www.bcie.co.uk/userfiles/universities/cardiff%20met.jpg", | |
| "lat": 51.482708, | |
| "lng": -3.165881} | |
| ] | |
| }; | |
| var json1 = { | |
| "place": [ | |
| { | |
| "title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1578881.jpg", | |
| "lng": 145.141754, | |
| "lat": -37.766372 | |
| }, | |
| { | |
| "title": "kin-dza-dza", | |
| "image": "http://static.panoramio.com/photos/1920x1280/97671.jpg", | |
| "lng": 30.785408, | |
| "lat": 46.639301 | |
| }, | |
| { | |
| "title": "Arenal", | |
| "image": "http://static.panoramio.com/photos/1920x1280/25514.jpg", | |
| "lng": -84.693432, | |
| "lat": 10.479372 | |
| }, | |
| { | |
| "title": "Maria Alm", | |
| "image": "http://static.panoramio.com/photos/1920x1280/57823.jpg", | |
| "lng": 12.900009, | |
| "lat": 47.409968 | |
| }, | |
| { | |
| "title": "Wheatfield in afternoon light", | |
| "image": "http://static.panoramio.com/photos/1920x1280/532693.jpg", | |
| "lng": 11.272659, | |
| "lat": 59.637472 | |
| }, | |
| { | |
| "title": "Burg Hohenwerfen", | |
| "image": "http://static.panoramio.com/photos/1920x1280/57819.jpg", | |
| "lng": 13.189259, | |
| "lat": 47.483221 | |
| }, | |
| { | |
| "title": "Thunderstorm in Martinique", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1282387.jpg", | |
| "lng": -61.013432, | |
| "lat": 14.493688 | |
| }, | |
| { | |
| "title": "Al tard", | |
| "image": "http://static.panoramio.com/photos/1920x1280/945976.jpg", | |
| "lng": 0.490866, | |
| "lat": 40.903783 | |
| }, | |
| { | |
| "title": "Hintersee bei Ramsau", | |
| "image": "http://static.panoramio.com/photos/1920x1280/73514.jpg", | |
| "lng": 12.852459, | |
| "lat": 47.609519 | |
| }, | |
| { | |
| "title": "Antelope Canyon, Ray of Light", | |
| "image": "http://static.panoramio.com/photos/1920x1280/298967.jpg", | |
| "lng": -111.407890, | |
| "lat": 36.894037 | |
| }, | |
| { | |
| "title": "Val Verzasca - Switzerland", | |
| "image": "http://static.panoramio.com/photos/1920x1280/88151.jpg", | |
| "lng": 8.838158, | |
| "lat": 46.257746 | |
| }, | |
| { | |
| "title": "Guggenheim and spider", | |
| "image": "http://static.panoramio.com/photos/1920x1280/6463.jpg", | |
| "lng": -2.933736, | |
| "lat": 43.269159 | |
| }, | |
| { | |
| "title": "Mostar", | |
| "image": "http://static.panoramio.com/photos/1920x1280/107980.jpg", | |
| "lng": 17.815200, | |
| "lat": 43.337255 | |
| }, | |
| { | |
| "title": "Bora Bora", | |
| "image": "http://static.panoramio.com/photos/1920x1280/9439.jpg", | |
| "lng": -151.750000, | |
| "lat": -16.500000 | |
| }, | |
| { | |
| "title": "Nivane in Ørsta", | |
| "image": "http://static.panoramio.com/photos/1920x1280/673131.jpg", | |
| "lng": 6.108742, | |
| "lat": 62.226676 | |
| }, | |
| { | |
| "title": "italy-toscany", | |
| "image": "http://static.panoramio.com/photos/1920x1280/346269.jpg", | |
| "lng": 11.616282, | |
| "lat": 43.064389 | |
| }, | |
| { | |
| "title": "Gentoo Penguins at Sunrise", | |
| "image": "http://static.panoramio.com/photos/1920x1280/290039.jpg", | |
| "lng": -59.070311, | |
| "lat": -52.430295 | |
| }, | |
| { | |
| "title": "Les Mines", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1870141.jpg", | |
| "lng": 1.314712, | |
| "lat": 45.922199 | |
| }, | |
| { | |
| "title": "Az Å‘rszem", | |
| "image": "http://static.panoramio.com/photos/1920x1280/516809.jpg", | |
| "lng": 18.239279, | |
| "lat": 47.535341 | |
| }, | |
| { | |
| "title": "Amanecer en el Salar de Uyuni", | |
| "image": "http://static.panoramio.com/photos/1920x1280/67347.jpg", | |
| "lng": -67.549438, | |
| "lat": -20.552438 | |
| }, | |
| { | |
| "title": "tulip", | |
| "image": "http://static.panoramio.com/photos/1920x1280/405822.jpg", | |
| "lng": 139.011619, | |
| "lat": 37.871500 | |
| }, | |
| { | |
| "title": "Warsaw Bridge 01 [www.wierzchon.com]", | |
| "image": "http://static.panoramio.com/photos/1920x1280/233619.jpg", | |
| "lng": 21.035728, | |
| "lat": 52.242353 | |
| }, | |
| { | |
| "title": "Hospiz", | |
| "image": "http://static.panoramio.com/photos/1920x1280/70975.jpg", | |
| "lng": 8.024461, | |
| "lat": 46.245801 | |
| }, | |
| { | |
| "title": "icy_chains_1_hdr_web", | |
| "image": "http://static.panoramio.com/photos/1920x1280/882660.jpg", | |
| "lng": -79.798197, | |
| "lat": 43.321353 | |
| }, | |
| { | |
| "title": "Marble Cave", | |
| "image": "http://static.panoramio.com/photos/1920x1280/9363990.jpg", | |
| "lng": -72.607527, | |
| "lat": -46.647138 | |
| }, | |
| { | |
| "title": "fukushimagata", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1884507.jpg", | |
| "lng": 139.243813, | |
| "lat": 37.909669 | |
| }, | |
| { | |
| "title": "Torrent de pareis", | |
| "image": "http://static.panoramio.com/photos/1920x1280/97723.jpg", | |
| "lng": 2.805762, | |
| "lat": 39.852352 | |
| }, | |
| { | |
| "title": "Sr. da Pedra", | |
| "image": "http://static.panoramio.com/photos/1920x1280/537672.jpg", | |
| "lng": -8.659008, | |
| "lat": 41.068821 | |
| }, | |
| { | |
| "title": "zaldiak", | |
| "image": "http://static.panoramio.com/photos/1920x1280/204924.jpg", | |
| "lng": -1.806951, | |
| "lat": 43.245140 | |
| }, | |
| { | |
| "title": "TIBAUM-BIZZAR", | |
| "image": "http://static.panoramio.com/photos/1920x1280/114795.jpg", | |
| "lng": 7.706180, | |
| "lat": 51.665741 | |
| }, | |
| { | |
| "title": "Aurora borealis", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1287881.jpg", | |
| "lng": 44.215508, | |
| "lat": 65.829148 | |
| }, | |
| { | |
| "title": "Water Cuts Rock", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1781717.jpg", | |
| "lng": -113.047771, | |
| "lat": 37.312154 | |
| }, | |
| { | |
| "title": "albufera", | |
| "image": "http://static.panoramio.com/photos/1920x1280/196103.jpg", | |
| "lng": -0.323882, | |
| "lat": 39.349166 | |
| }, | |
| { | |
| "title": "Boulzojavri", | |
| "image": "http://static.panoramio.com/photos/1920x1280/266224.jpg", | |
| "lng": 24.373169, | |
| "lat": 68.908534 | |
| }, | |
| { | |
| "title": "Richmond Deer", | |
| "image": "http://static.panoramio.com/photos/1920x1280/6126294.jpg", | |
| "lng": -0.275195, | |
| "lat": 51.445890 | |
| }, | |
| { | |
| "title": "Buci Seine - Looking Up", | |
| "image": "http://static.panoramio.com/photos/1920x1280/168032.jpg", | |
| "lng": 2.336990, | |
| "lat": 48.853891 | |
| }, | |
| { | |
| "title": "Mercury Bay Sunrise", | |
| "image": "http://static.panoramio.com/photos/1920x1280/1370932.jpg", | |
| "lng": 175.699196, | |
| "lat": -36.817685 | |
| }, | |
| { | |
| "title": "Adelie-Prat- Kratzmaier", | |
| "image": "http://static.panoramio.com/photos/1920x1280/120844.jpg", | |
| "lng": -59.683228, | |
| "lat": -62.485684 | |
| }, | |
| { | |
| "title": "Infrared Mediterranean Heat", | |
| "image": "http://static.panoramio.com/photos/1920x1280/940294.jpg", | |
| "lng": 25.376015, | |
| "lat": 36.461537 | |
| }, | |
| { | |
| "title": "Vizivarázs", | |
| "image": "http://static.panoramio.com/photos/1920x1280/4446084.jpg", | |
| "lng": 17.504482, | |
| "lat": 47.842773 | |
| }, | |
| { | |
| "title": "Wave", | |
| "image": "http://static.panoramio.com/photos/1920x1280/498352.jpg", | |
| "lng": -112.005315, | |
| "lat": 36.995972 | |
| }, | |
| { | |
| "title": "Leoparden", | |
| "image": "http://static.panoramio.com/photos/1920x1280/775893.jpg", | |
| "lng": 36.046829, | |
| "lat": -3.818353 | |
| }, | |
| { | |
| "title": "Sunset Beach Walker", | |
| "image": "http://static.panoramio.com/photos/1920x1280/665502.jpg", | |
| "lng": -124.077530, | |
| "lat": 44.519888 | |
| }, | |
| { | |
| "title": "Wat Suwan Kuha or Wat Tham, Phang Nga, Winner Unusual Location April 2008", | |
| "image": "http://static.panoramio.com/photos/1920x1280/9021415.jpg", | |
| "lng": 98.471628, | |
| "lat": 8.428840 | |
| }, | |
| { | |
| "title": "Landwasser-Viadukt - This is an unofficial photo point. Just follow the footpath up from the official one, until the clearing.", | |
| "image": "http://static.panoramio.com/photos/1920x1280/287244.jpg", | |
| "lng": 9.675007, | |
| "lat": 46.681229 | |
| }, | |
| { | |
| "title": "Oak tree in winter", | |
| "image": "http://static.panoramio.com/photos/1920x1280/677366.jpg", | |
| "lng": 10.771065, | |
| "lat": 59.663926 | |
| }, | |
| { | |
| "title": "albufera", | |
| "image": "http://static.panoramio.com/photos/1920x1280/196086.jpg", | |
| "lng": -0.323882, | |
| "lat": 39.349166 | |
| }, | |
| { | |
| "title": "Cold morning", | |
| "image": "http://static.panoramio.com/photos/1920x1280/4340931.jpg", | |
| "lng": 12.113349, | |
| "lat": 49.342559 | |
| }, | |
| { | |
| "title": "Arpy Lake - Aosta Valley - Italy", | |
| "image": "http://static.panoramio.com/photos/1920x1280/88122.jpg", | |
| "lng": 6.999636, | |
| "lat": 45.723008 | |
| }, | |
| { | |
| "title": "MITTENS ALONG THE ROAD", | |
| "image": "http://static.panoramio.com/photos/1920x1280/10219582.jpg", | |
| "lng": -110.091248, | |
| "lat": 36.970810 | |
| }, | |
| { | |
| "title": "Táltostánc", | |
| "image": "http://static.panoramio.com/photos/1920x1280/558167.jpg", | |
| "lng": 18.001614, | |
| "lat": 47.409038 | |
| }]}; | |
| var markers = []; | |
| $.each(json1.place, function (key, data) { | |
| var latLng = new google.maps.LatLng(data.lat, data.lng); | |
| var marker = new google.maps.Marker({ | |
| position: latLng, | |
| map: map, | |
| icon: icon, | |
| animation: google.maps.Animation.DROP, | |
| title: data.title, | |
| }); | |
| markers.push(marker); | |
| var details = '<div class="mapCard"><img height="80px" src="' + data.image + '"><div class="text"><h3>'+ data.title +'</h3> <a href="' + data.website + '">link</a></div> </div>'; | |
| bindInfoWindow(marker, map, infowindow, details); | |
| // }); | |
| }); | |
| /*var markerCluster = new MarkerClusterer(map, markers, | |
| {imagePath: 'ico'}); | |
| */ | |
| var markerCluster = new MarkerClusterer(map, markers, | |
| {styles: cluster_styles}); | |
| } | |
| function bindInfoWindow(marker, map, infowindow, strDescription) { | |
| google.maps.event.addListener(marker, 'click', function () { | |
| currentMark = this; | |
| //marker.setAnimation(google.maps.Animation.BOUNCE); | |
| this.setIcon(icon2); | |
| infowindow.setContent(strDescription); | |
| infowindow.open(map, this); | |
| var iwOuter = $('.gm-style-iw'); | |
| var iwBackground = iwOuter.prev(); | |
| iwBackground.children(':nth-child(2)').css({'display' : 'none'}); | |
| iwBackground.children(':nth-child(4)').css({'display' : 'none'}); | |
| iwBackground.parent().addClass("gm-style-iw-parent"); | |
| }); | |
| } | |
| google.maps.event.addListener(infowindow,'closeclick',function(){ | |
| currentMark.setIcon(icon); | |
| }); | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| //style for the map | |
| var googleMapStyle = { | |
| "StyleDark": [ | |
| { | |
| "featureType": "all", | |
| "elementType": "labels.text.fill", | |
| "stylers": [ | |
| { | |
| "saturation": 36 | |
| }, | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 40 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "all", | |
| "elementType": "labels.text.stroke", | |
| "stylers": [ | |
| { | |
| "visibility": "on" | |
| }, | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 16 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "all", | |
| "elementType": "labels.icon", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative", | |
| "elementType": "geometry.fill", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 20 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative", | |
| "elementType": "geometry.stroke", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 17 | |
| }, | |
| { | |
| "weight": 1.2 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative", | |
| "elementType": "labels", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.country", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.country", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.country", | |
| "elementType": "labels.text", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.province", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.locality", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| }, | |
| { | |
| "saturation": "-100" | |
| }, | |
| { | |
| "lightness": "30" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.neighborhood", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "administrative.land_parcel", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "landscape", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| }, | |
| { | |
| "gamma": "0.00" | |
| }, | |
| { | |
| "lightness": "74" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "landscape", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 20 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "landscape.man_made", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "lightness": "3" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "all", | |
| "stylers": [ | |
| { | |
| "visibility": "off" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "poi", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 21 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "visibility": "simplified" | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.highway", | |
| "elementType": "geometry.fill", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 17 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.highway", | |
| "elementType": "geometry.stroke", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 29 | |
| }, | |
| { | |
| "weight": 0.2 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.arterial", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 18 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "road.local", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 16 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "transit", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 19 | |
| } | |
| ] | |
| }, | |
| { | |
| "featureType": "water", | |
| "elementType": "geometry", | |
| "stylers": [ | |
| { | |
| "color": "#000000" | |
| }, | |
| { | |
| "lightness": 17 | |
| } | |
| ] | |
| } | |
| ] | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment