Google Maps with Custom Styles and Custom Pin

Pankil Bhatt

4.38/5 (5 votes)

16 Mar 2015CPOL1 min read

17.8K

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.

JavaScript

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

HTML

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

The styles in google Maps are declared with JavaScript object.

JavaScript

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

We can add the script for water in styles object.

JavaScript

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.

JavaScript

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.

VBScript

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:

JavaScript

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)