Map State Sample

A sample about ASP.NET Google Map Control post-back state persistence.

Add GoogleMapState extender of GoogleMap control when you need to persist and send to server the current map state (center, map type and zoom) during post-back. Here we just save and load current state to user session.

Thank you for using the Development Build of ASP.NET Google Map Control to build Google Maps faster.
Purchase the Commercial Build now to get access to all product updates and the ASP.NET Google Map Control expert support.

Save current state

Load last saved state


Source

Markup

<%@ Page Language="C#" MasterPageFile="../Maps.master" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps.Samples.Maps.State.Default" %>

<asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="jumbotron">
        <h2>Map State Sample</h2>
        <p>
            A sample about ASP.NET Google Map Control post-back state persistence.
        </p>
    </div>
    <p style="padding-bottom: 10px;">
        Add GoogleMapState extender of GoogleMap control when you need to persist and send to server the current map state (center, map type and zoom) during post-back.
        Here we just save and load current state to user session.
    </p>
    <div class="map-wrap">
        <map:GoogleMap ID="GoogleMap1" runat="server" CssClass="map" Address="Google Headquarters, Castro Street, Mountain View, CA" Zoom='8'
            Width="100%" Height="600px" FullscreenControl="true">
        </map:GoogleMap>
        <%--<map:GoogleMapState ID="GoogleMapState1" runat="server" TargetControlID="GoogleMap1"></map:GoogleMapState>--%>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h4>Save current state</h4>
            <asp:Button ID="btnSave" runat="server" Text="Save State" OnClick="HandleSaveClick" CssClass="btn btn-primary" />
        </div>
        <div class="col-md-6">
            <h4>Load last saved state</h4>
            <asp:Button ID="btnLoad" runat="server" Text="Load State" OnClick="HandleLoadClick" CssClass="btn btn-primary" />
        </div>
    </div>
    
</asp:Content>

Code Behind

using System;

namespace GoogleMaps.Samples.Maps.State
{
    public partial class Default : System.Web.UI.Page
    {
        protected void HandleSaveClick(object sender, EventArgs e)
        {
            var state = new State
            {
                Center = GoogleMap1.Center,
                MapType = GoogleMap1.MapType,
                Zoom = GoogleMap1.Zoom
            };
            Session["MapState"] = state;
        }

        protected void HandleLoadClick(object sender, EventArgs e)
        {
            var state = Session["MapState"] as State;
            if(state != null)
            {
                GoogleMap1.Center = state.Center;
                GoogleMap1.MapType = state.MapType;
                GoogleMap1.Zoom = state.Zoom;
            }
        }

        class State
        {
            public LatLng Center;
            public MapType MapType;
            public int Zoom;
        }
    }
}