Latest

random

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

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 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="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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>'+
            '<h1>Mumbai</h1>'+
            '<div id="bodyContent">'+
            '<p><b>test</b></p>'+          
            '</div>'+
            '</div>';

        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'
        });
        pMarker.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        });
}
// To remove markers
        function RemoveMarkerPlace() {
            for (var i in pMarker)
                pMarker[i].setMap(null);
        }
    </script>

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

Download the source code click here

No comments:

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.