Styled Google Maps Example
Styled Maps - Google Maps JavaScript API v3
Styled maps allow you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas. There are two ways to apply styles to a map:
- By setting the .styles property of the map's MapOptions object.
- By creating and defining a StyledMapType and applying it to the map.
Find the source code below :-
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Styled Google Maps Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new
google.maps.LatLng(28.633274,77.219553);
var myOptions = {
zoom: 16,
center:
latlng,
mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']},
streetViewControl: false,
mapTypeControl: false
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new
google.maps.Marker({
position: latlng,
map: map,
title: 'Rajeev Chowk, New Delhi'
});
var stylez = [{featureType: "all",elementType:
"all",stylers: [{ saturation: -100
}]}];
var mapType = new
google.maps.StyledMapType(stylez, { name:"Grayscale"
});
map.mapTypes.set('tehgrayz',
mapType);
map.setMapTypeId('tehgrayz');
}
</script>
</head>
<body onload="initialize();">
<form id="form1" runat="server">
<div id="map_canvas"
style="width: auto; height: 500px">
</div>
</form>
</body>
</html>
Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :)
For more visit https://developers.google.com/maps/documentation/javascript/styling,
Styled Google Maps Example
Reviewed by Ravi Kumar
on
11:11 AM
Rating:
Reviewed by Ravi Kumar
on
11:11 AM
Rating:
No comments: