Are you aware Google lets you customize your Google Map location based on theme colors. Today I will explain you how to customize google maps from scratch, this helps you to beautify your website design.
PROJECT SCREENSHOT
STEP 1: Modify the Default Latitude and Longitude values
[code]<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fv%3D3.exp%26amp%3Bsensor%3Dfalse%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value, Longitude_Value);</pre>
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>
;
<pre>][/code]
For Customizing Google Maps, we have to understand attributes available with script
[code] <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DAIzaSyDJCK8uxY8UQoSxASXlNgSeHbXE0ppKBXQ%26v%3D3.exp%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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);
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%2F%2FHTML%20Code%0A%26lt%3Bdiv%20id%3D%22map-canvas%22%20style%3D%22height%3A100%25%22%26gt%3B%26lt%3B%2Fdiv%26gt%3B%5B%2Fcode%5D%3C%2Fpre%3E%0A%3Cp%3E%26nbsp%3B%3C%2Fp%3E%0A%3Ch5%3E%3Cstrong%3EWe%20can%20also%20Add%20custom%20marker%20icon.%3C%2Fstrong%3E%3C%2Fh5%3E%0A%3Cpre%3E%5Bcode%5D%20%3Cscript%20src%3D%22https%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fjs%3Fkey%3DAIzaSyDJCK8uxY8UQoSxASXlNgSeHbXE0ppKBXQ%26v%3D3.exp%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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>
[/code]
So finally you can now check out the new Google Map location. If you have doubts or problems then please comment below. Hope you liked our tutorial on how to customize Google Maps.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- How To Create 3D Effects On Your Images With JavaScript Plugin
- Complete Registration Form With Javascript Validation
- Javascript Age Verification
- Shrinking Navbar Resize When Scrolling Down – Jquery Tutorial
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.