Introduction
Google Maps is one of the best services. It is a free tool that allows you to easily implement information, rich maps on your website.
In this article we will see how to use the Google Maps API and Google Maps with custom styles as in the API that controls the map styles and a custom pin.
Google Map Library
First put Google Maps JavaScript library into the <head> tag.
- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
Google Map Components
There are the following three components to style the Google Maps map.
- The featureType
- The elementType
- The stylers
featureType is used to select the geographical object, like road, the water, the parks and so on. We use some of the objects in this article.
- Administrative
- landscape
- poi
- poi.government
- road
- road.highway
- transit
- water
For more details, just use the API reference: Google Maps feature type specification.
elementtype targets the element that is part of the geographical object.
stylers is an array of properties to adjust the object's colors and its visibility.
Here is the Code
We need to add a <div> element and assign it an id.
The styles in Google Maps are declared with a JavaScript object.
- window.onload = function ()
- {
- var styles = [
-
- ]
- };
We can add the script for water in the styles object.
- window.onload = function ()
- {
- var styles = [
- {
- "featureType": "water",
- "elementType": "all",
- "stylers":
- [
- {
- "color": "#b2b2b2"
- },
- {
- "visibility": "on"
- }
- ]
- }
- ]
- };
We can add the script for the road into the existing styles object.
- window.onload = function ()
- {
-
- var styles = [
- {
- "featureType": "water",
- "elementType": "all",
- "stylers": [
- {
- "color": "#b2b2b2"
- },
- {
- "visibility": "on"
- }
- ]
- },
- {
- "featureType": "road",
- "elementType": "all",
- "stylers": [
- {
- "saturation": -100
- },
- {
- "lightness": 45
- }
- ]
- }
- ];
We can eve add the other scripts into an existing styles object.
Also make a custom pin in the script.
- var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(23.0247119, 72.5714988), map: map, icon: 'local path of the icon image' });
Then, display the map to the <div> container with the following functions.
- window.onload = function ()
- {
- var styles = [
-
- ]
- };
- var options =
- {
- mapTypeControlOptions:
- {
- mapTypeIds: ['Styled']
- },
- center: new google.maps.LatLng(23.0167119, 72.5728762),
- zoom: 12,
- disableDefaultUI: true,
- mapTypeId: 'Styled'
- };
- var div = document.getElementById('pankil');
- var map = new google.maps.Map(div, options);
- var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
- map.mapTypes.set('Styled', styledMapType);
- var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(23.0247119, 72.5714988), map: map, icon: 'p.png' });
- }
At the end, the map should be appended to the Page.
![]()