Do you know Google is providing an awesome feature, that you can create a totally customizable personalized Google Maps for your website based on theme colors. Today I want to explain how to customize and style Google Map from the scratch, just very few lines of code, this helps you to enrich your website design.
Download Script 
Live DemoDefault Google Map
Just modify the Latitude and Longitude values, click here to the live demo
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value, Longitude_Value);
function initialize()
{
var mapOptions = {
zoom: 8,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value, Longitude_Value);
function initialize()
{
var mapOptions = {
zoom: 8,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
Adding Styles
Google Map styling structure.
styles:[
{
"featureType": "transit.station.rail",
"stylers": [
{ "visibility": "on" },
{ "invert_lightness": true },
{ "color": "#808080" },
{ "weight": 0.1 },
{ "saturation": 1 },
{ "lightness": 1 },
{ "gamma": 1 }
]
},
{
....
}
]
{
"featureType": "transit.station.rail",
"stylers": [
{ "visibility": "on" },
{ "invert_lightness": true },
{ "color": "#808080" },
{ "weight": 0.1 },
{ "saturation": 1 },
{ "lightness": 1 },
{ "gamma": 1 }
]
},
{
....
}
]
Customizing Google Maps
Styling the Google Map.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
function initialize()
{
var mapOptions = {
backgroundColor: "#ffffff", // background color
zoom: 8, // map zoom position
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- Styles Start----------
styles: [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},
{
"featureType": "landscape.man_made",
"stylers": [
{ "color": "#ffffff" },
{ "visibility": "off" }
]
},
{
"featureType": "water",
"stylers": [
{ "color": "#80C8E5" }, // applying map water color
{ "saturation": 0 }
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#999999" }
]
}
,{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
}
,{
"elementType": "labels.text",
"stylers": [
{ "color": "#333333" }
]
}
,{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
//------------Styles End--------------
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
function initialize()
{
var mapOptions = {
backgroundColor: "#ffffff", // background color
zoom: 8, // map zoom position
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- Styles Start----------
styles: [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},
{
"featureType": "landscape.man_made",
"stylers": [
{ "color": "#ffffff" },
{ "visibility": "off" }
]
},
{
"featureType": "water",
"stylers": [
{ "color": "#80C8E5" }, // applying map water color
{ "saturation": 0 }
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#999999" }
]
}
,{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
}
,{
"elementType": "labels.text",
"stylers": [
{ "color": "#333333" }
]
}
,{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
//------------Styles End--------------
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
Styled Wizard
Create Google map styles using Styled Maps Wizard.
Add Marker
Adding custom marker icon.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
var markers = [];
var image = new google.maps.MarkerImage( '9lessons.png', // icon
new google.maps.Size(84,56), // icon dimensions width and height in pixels
new google.maps.Point(0,0),
new google.maps.Point(42,56)
);
function addMarker()
{
markers.push(new google.maps.Marker({
position: mapCoordinates,
raiseOnDrag: false,
icon: image,
map: map,
draggable: false
}));
}
function initialize()
{
var mapOptions = {
.......
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarker(); // calling function
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
var markers = [];
var image = new google.maps.MarkerImage( '9lessons.png', // icon
new google.maps.Size(84,56), // icon dimensions width and height in pixels
new google.maps.Point(0,0),
new google.maps.Point(42,56)
);
function addMarker()
{
markers.push(new google.maps.Marker({
position: mapCoordinates,
raiseOnDrag: false,
icon: image,
map: map,
draggable: false
}));
}
function initialize()
{
var mapOptions = {
.......
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarker(); // calling function
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>
Thankyou Srinivas!
ReplyDeletewe know where to find you now 3:)
ReplyDeleteIndeed it is great. I tried this few times but failed. Thanks.
ReplyDeleteWaiting for this
ReplyDeletebeen using that one last year i used google api
ReplyDeleteGreat post...!!!! Thanks
ReplyDeleteThankyou Srinivas!
ReplyDeleteThat's what I've been looking for.
Admin,
ReplyDeletePlease,i want a tutorial on how to integrate google map of a particular city with street or google map with countries on a website
Grt. Do we need to have an API key and secret ID if we want to use this in our classified portal for our users and advertisers? As I am seeing you have not used that. So what is your say on this?
ReplyDeleteGreat post thanks Srinivas..
ReplyDeletelike that
ReplyDeleteThere is no zoom in and zoom out functionality.....otherwise it is perfect!!!
ReplyDeleteThanks for the nice post.. going too add it in my site
ReplyDeletehttp://t2lead.in
Thanks again
Which wireframing tool you used wireframig.
ReplyDeleteexcelent, good explanation, thanks men.
ReplyDeleteNão consegui ver o 'Live Demo', o link está com problemas
ReplyDeleteI could not see the 'Live Demo', the link has problems
मैं 'लाइव डेमो' नहीं देख सकता था, कड़ी मुसीबत में है
Não consegui acessar o 'Download Script', o link está quebrado!
ReplyDeleteUnable to access the 'Download Script', the link is broken!
'डाउनलोड स्क्रिप्ट' का उपयोग करने में असमर्थ, लिंक टूट गया है!
please give an example using php mysql and google map.
ReplyDeletevery well posted. thanks. will try though it seems a bit tough for me.
ReplyDeletegood job
ReplyDeleteIt's really amazing with lot of stuffs,
ReplyDeletewell done, thanks
Excellent tutorial Srinivas . I tried to implement this tutorial and it worked liked a charm . Thanks for sharing the codes with us .
ReplyDeleteusing this code i changed Latitude and Longitude but no result shown what i need to do ?
ReplyDeleteCan you show how to make map responsive ?
ReplyDeletethanks for sharing this amazing post.
ReplyDeletethis is really helpful one...!!
Very useful , can you show how to add 2 or more markers(locations) ?
ReplyDeleteRegards.
Thank you sir!!!
ReplyDeleteit's free for commercial using or google maps charge for it
ReplyDeleteGreat post so useful article thank you sir.
ReplyDeleteGreat Post! Very helpful! But i have one question: how do I add another maker?
ReplyDeleteWould be great if you could publish a solution.
how to add more locations like example this >
ReplyDeletevar locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];