Styled Google Maps Example

random

Styled Google Maps Example

Styled Maps - Google Maps JavaScript API v3


Styled maps allow you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas. There are two ways to apply styles to a map:

  1. By setting the .styles property of the map's MapOptions object. 
  2. By creating and defining a StyledMapType and applying it to the map.

How to style, Styled, Google maps, gray style, embedded gray


Find the source code below :-


Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Styled Google Maps Example</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    function initialize() {       
        var latlng = new google.maps.LatLng(28.633274,77.219553);

        var myOptions = {
            zoom: 16,
            center: latlng,
            mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']},
            streetViewControl: false,
            mapTypeControl: false
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
               
            var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Rajeev Chowk, New Delhi'
        });
               
        var stylez = [{featureType: "all",elementType: "all",stylers: [{ saturation: -100 }]}];       
        var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
           
        map.mapTypes.set('tehgrayz', mapType);
        map.setMapTypeId('tehgrayz');
       
}
    </script>

</head>
<body onload="initialize();">
    <form id="form1" runat="server">
    <div id="map_canvas" style="width: auto; height: 500px">
    </div>
    </form>
</body>

</html>
Download the source code click here ..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading .. :)

For more visit https://developers.google.com/maps/documentation/javascript/styling

Styled Google Maps Example Reviewed by Ravi Kumar on 11:11 AM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.