1. Grab JSON code using:
http://gmaps-samples-
v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
2. Then create a XX.html which has source:
--------------------Source-Head------------------
<!DOCTYPE html>
<html>
<head>
<title>Customized Google Maps</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<!--change language=XX for specific lang-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
var map;
var mylocation = new google.maps.LatLng(34.686722,135.526974);
<!--change LatLng for coordinates-->
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
<!--the copy&paste of JSON code won't work here so remove the extra "",
refer the code below to get your map styles -->
var featureOpts = [
{
stylers: [
{ visibility: 'simplified' },
{ weight: 0.1 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.province',
stylers: [
{ visibility: 'on' },
{ weight: 8 },
{ color: '#000000' }
]
},
{
featureType: 'administrative.province',
elementType: 'labels.text',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.locality',
stylers: [
{ visibility: 'simplified' },
{ weight: 5 },
{ color: '#a62747' }
]
},
{
featureType: 'administrative.locality',
elementType: 'labels.text',
stylers: [
{ visibility: 'off' }
]
}
];
var mapOptions = {
zoom: 10,
center: mylocation,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'myStyle'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
