Google Maps with Custom Styles and Custom Pin

Pankil Bhatt

4.38/5 (5 votes)

Mar 17, 2015

CPOL

1 min read

17762

In this tip, we will see how to use the Google Maps API and Google Maps with custom styles and a custom pin.

Download full source

Introduction

Google Maps is one of the best services. It is free tool that allows you to easily implement information-rich maps on your website.

In this post, we will see how to use the Google Map API and Google Maps with custom styles the API that controls the map styles and custom pin.

This tip solves the Designing problem in the Google Map to make your own design like water, rode, map pin, etc. that is a better option to design the Google Map.

It helps Template Designer, Web Designer to make his own design depending on the HTML Design.

Background

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 three components to style the google map.

The featureType
The elementType
The stylers

featuretype is used to select geographical object like road, water, parks, etc. We have used some objects in this post.

Administrative
landscape
poi
poi.government
road
road.highway
transit
water

For more details, just follow the API reference: Google Maps feature type specification.

elementtype is used to target the element that is part of the geographical object.

stylers is an array of properties to adjust the object colors and its visibility.

Using the Code

We need to add a <div> element and assigned with an id.

<div id="pankil"></div>

The styles in google Maps are declared with JavaScript object.

window.onload = function () {
     var styles = [
           //add the scripts here
         ]
};

We can add the script for water in styles object.

window.onload = function () {
       var styles = [
        {
          "featureType": "water",
          "elementType": "all",
          "stylers": [
                {
                   "color": "#b2b2b2"
                },
             {
                "visibility": "on"
             }
          ]
        }
  ];

We can add the script for the road in 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
               }
           ]
         }
];

Even we can add the others scripts into existing styles object.

We can also make a custom pin into 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 = [
     //add the scripts here
   ]
};

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 on the Page.