Skip to content

Instantly share code, notes, and snippets.

@damiencarbery
Created July 17, 2020 12:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save damiencarbery/854759df4159b138c8fbb397fcd535ec to your computer and use it in GitHub Desktop.
Save damiencarbery/854759df4159b138c8fbb397fcd535ec to your computer and use it in GitHub Desktop.
Change Google Maps colours - Liven up your embedded Google Maps with some colour changes. - https://www.damiencarbery.com/2020/07/change-google-maps-colours/
<div id="map"></div>
<script>
var address = "A94 A2T7, Ireland";
var infoWindowContent = '<strong>Reform Dublin Blackrock</strong><br />Bath Place (behind Blackrock Main Street)<br />Blackrock<br />Co. Dublin</p>';
var zoomLevel = 16;
function initialize() {
var myOptions = {
zoom: zoomLevel,
//mapTypeControl: false,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"elementType": "geometry",
"stylers": [{"color": "#f5f5f5"}]
},
{
"elementType": "labels.icon",
"stylers": [{"visibility": "off"}]
},
{
"elementType": "labels.text.fill",
"stylers": [{"color": "#616161"}]
},
{
"elementType": "labels.text.stroke",
"stylers": [{"color": "#f5f5f5"}]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{"color": "#bdbdbd"}]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [{"color": "#eeeeee"}]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{"color": "#757575"}]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{"color": "#e5e5e5"}]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{"color": "#9e9e9e"}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{"color": "#ffffff"}]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [{"color": "#757575"}]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{"color": "#dadada"}]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [{"color": "#616161"}]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{"color": "#9e9e9e"}]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{"color": "#e5e5e5"}]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [{"color": "#eeeeee"}]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [{"color": "#aadaff"}]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{"color": "#aadaff"}]
}
] };
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: infoWindowContent,
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
// Open info window on load.
google.maps.event.addListenerOnce(map, 'tilesloaded', function() { infowindow.open(map, marker); });
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment