is it possible with the new Google maps javascript API to change the colors of the maps to have something like this map under the light blue panel
Styled maps might be what you are looking for,
It's worth mentioning the wizard first (note that in #9, it should be styles
, not style
)
https://mapstyle.withgoogle.com
These are references:
http://code.google.com/apis/maps/documentation/javascript/reference.html#StyledMapType
http://code.google.com/apis/maps/documentation/javascript/styling.html
There's an example of a styled map in the static API http://code.google.com/apis/maps/documentation/staticmaps/#StyledMaps
The saturation and lightness control the look. Less saturated = less color, more lightness = whiter
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var grayStyles = [
{
featureType: "all",
stylers: [
{ saturation: -90 },
{ lightness: 50 }
]
},
];
var mapOptions = {
center: new google.maps.LatLng(41.325663, 19.8029607),
zoom: 15,
styles: grayStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With