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.

  1. <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.

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.

  1. Administrative
  2. landscape
  3. poi
  4. poi.government
  5. road
  6. road.highway
  7. transit
  8. 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.

  1. <div id="pankil"></div>
The styles in Google Maps are declared with a JavaScript object.
  1. window.onload = function ()
  2. {
  3. var styles = [
  4. //add the scripts here
  5. ]
  6. };
We can add the script for water in the styles object.
  1. window.onload = function ()
  2. {
  3. var styles = [
  4. {
  5. "featureType": "water",
  6. "elementType": "all",
  7. "stylers":
  8. [
  9. {
  10. "color": "#b2b2b2"
  11. },
  12. {
  13. "visibility": "on"
  14. }
  15. ]
  16. }
  17. ]
  18. };
We can add the script for the road into the existing styles object.
  1. window.onload = function ()
  2. {
  4. var styles = [
  5. {
  6. "featureType": "water",
  7. "elementType": "all",
  8. "stylers": [
  9. {
  10. "color": "#b2b2b2"
  11. },
  12. {
  13. "visibility": "on"
  14. }
  15. ]
  16. },
  17. {
  18. "featureType": "road",
  19. "elementType": "all",
  20. "stylers": [
  21. {
  22. "saturation": -100
  23. },
  24. {
  25. "lightness": 45
  26. }
  27. ]
  28. }
  29. ];
We can eve add the other scripts into an existing styles object.

Also make a custom pin in the script.

  1. 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.
  1. window.onload = function ()
  2. {
  3. var styles = [
  4. //add the scripts here
  5. ]
  6. };
  7. var options =
  8. {
  9. mapTypeControlOptions:
  10. {
  11. mapTypeIds: ['Styled']
  12. },
  13. center: new google.maps.LatLng(23.0167119, 72.5728762),
  14. zoom: 12,
  15. disableDefaultUI: true,
  16. mapTypeId: 'Styled'
  17. };
  18. var div = document.getElementById('pankil');
  19. var map = new google.maps.Map(div, options);
  20. var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
  21. map.mapTypes.set('Styled', styledMapType);
  22. var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(23.0247119, 72.5714988), map: map, icon: 'p.png' });
  23. }
At the end, the map should be appended to the Page.