WebSolutions: Google Maps with Custom Styles and Custom Pin

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 article we will see how to use the Google Map 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 the style the Google Maps map.

The featureType
The elementType
The stylers

featuretype is used to select geographical object, like road, the water, the parks and so on. we use some of the object in this article.

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

For more details, just follow 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 colors and its visibility.

Here is the Code :
We need to add a <div> element and assign it an id.

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

The Styles in Google Maps are declared with a 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 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 even add the others 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 = [
             //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.

Google Custom Map

Download Full Source

WebSolutions

Pages

Thursday, March 12, 2015

Google Maps with Custom Styles and Custom Pin

No comments: