Last active
July 25, 2016 03:52
-
-
Save dominicgan/40760561b8046a78f02b734b1063f672 to your computer and use it in GitHub Desktop.
Google map with custom style
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
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places&callback=initMap" async defer></script> | |
<script type="text/javascript"> | |
// grey style | |
var styles = [{"featureType":"all","elementType":"all","stylers":[{"saturation":-100},{"gamma":0.5}]},{"featureType":"administrative.locality","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"labels.text.stroke","stylers":[{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"administrative.neighborhood","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"geometry","stylers":[{"visibility":"on"},{"hue":"#ff3900"},{"saturation":"0"}]},{"featureType":"transit.station.rail","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"transit.station.rail","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]}]; | |
var map; | |
function initMap() { | |
map = new google.maps.Map(document.getElementById('company-address-map'), { | |
center: {lat: 1.333644, lng: 103.838822}, | |
zoom: 16, | |
streetViewControl: false, | |
mapTypeControlOptions: { | |
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID] | |
}, | |
}); | |
map.setOptions({styles: styles}); | |
var infowindow = new google.maps.InfoWindow(); | |
var service = new google.maps.places.PlacesService(map); | |
service.getDetails({ | |
placeId: 'ChIJheH9f20Z2jER1GssO_cvbDA' | |
}, function(place, status) { | |
if (status === google.maps.places.PlacesServiceStatus.OK) { | |
var marker = new google.maps.Marker({ | |
map: map, | |
position: place.geometry.location, | |
}); | |
google.maps.event.addListener(marker, 'click', function() { | |
infowindow.setContent('<div class="poi-info-window gm-style map-marker-address"><span class="title">' + place.name + '</span>' + | |
place.formatted_address + '<br> <a class="directions" href="https://www.google.com/maps/dir//510+11-00+SLF+Building+Singapore,+Thomson+Rd,+Immortal+The+Design+Station+Pte+Ltd,+Singapore+298135/@1.3332919,103.8370268,17z/" target="_blank">Get directions here</a>' + '</div>'); | |
infowindow.open(map, this); | |
}); | |
} | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment