How To Customize Google Maps Read more



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

How To Customize Google Maps

STEP 1: Modify the Default Latitude and Longitude values

<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="&lt;script&gt;" title="&lt;script&gt;" />
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>]
For Customizing Google Maps, we have to understand attributes available with script
 <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="&lt;script&gt;" title="&lt;script&gt;" />
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="&lt;script&gt;" title="&lt;script&gt;" />
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>

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 becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

                       1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.