How to Enable Visual Refresh a New Look on Map? - Google Maps Update


How to Enable Visual Refresh a New Look on Map? - Google Maps Update

Enable Visual Refresh on Google Map in WebApplication

In my previous posts I explained about How can I add a place in Google Map?, How to Show Google Map Multiple Markers Info Window in Java Script - API Google Maps v3

Here in this post I will explain about to enable visual refresh concept. The Google Maps visual refresh brings a fresh new look to applications using the Google Maps JavaScript API. You can change it using a single line of code. 

To enable visual refresh mode, set the google.maps.visualRefresh global property to true.

concept, google maps update, visual refresh,add a place marker without shadow, new base map tiles,default markers and window style,

Features  - Google Maps JavaScript API v3

The new look is primarily visual, and won’t change the functionality of your site. There are following changes:-
  • Newly designed base map tiles.
  • Markers, info windows, and map controls have been redesigned.
  • The Scale control now appears on the bottom right, instead of the bottom left.
  • The default fonts used in labels and UI elements has changed.
  • The marker property raiseOnDrag has been replaced by crossOnDrag.
  • All shadows have been removed in the visual refresh. Any shadows specified programmatic will be ignored. Find the source code below


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>How to Enable Visual Refresh New Look on Map? - Google Maps Update</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" />

    <script type="text/javascript" src=""></script>

    <script type="text/javascript">
      google.maps.visualRefresh = true;         // Enabling the visual refresh
      var pMarker = []; // Array for markers

      function initialize() {
        var myLatlng = new google.maps.LatLng(19.101053, 72.881927); // default location
        var mapOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP // Map Type

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // To display InfoWindow contents
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '<div id="bodyContent">'+

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 100 // Setting max width for infowindow

        // To add marker
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Mumbai, Maharashtra'

        google.maps.event.addListener(marker, 'click', function() {,marker);
// To remove markers
        function RemoveMarkerPlace() {
            for (var i in pMarker)

<body onload="initialize();">
    <form id="form1" runat="server">
    <div id="map-canvas" style="width: auto; height: 550px;">

Download the source code click here

How to Enable Visual Refresh a New Look on Map? - Google Maps Update Reviewed by Ravi Kumar on 11:53 AM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.