Click here to Skip to main content
Click here to Skip to main content

MDI style web app using VisualJS.NET and Google Maps API

By , 5 Oct 2012
Rate this:
Please Sign up or sign in to vote.

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

This is a RAD sample of MDI style web app using VisualJS.NET with Google Maps.

Let's write a web application displaying several MDI windows in a web browser for Google Maps searches.

Background 

Basic C# and ASP.NET skills are required.

Using the Code 

This is result:

  

First create an APS.NET Web Forms project and install the VisualJS.NET library. Then add a new VisualJS.NET web form and let's call it GMapsSampleForm. You can do that fast by right clicking on the project name or any solution folder and choosing the "Add Form" shorcut. Put TextBox, two Buttons, and a Panel in the created form. That is all we need in the UI.

Let's make it user friendly. We want to make map searching after hitting 'Enter' in after typing in the location in the textbox. Just navigate to the properties of our txtSearch and fill its property SubmitButton with btnSearch.

Let's leave our form for now and put Google Maps into our solution. Everything we need is a few lines of JavaScript in our target page: 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
        var maps = new Array();
        var geocoder;        

        function initialize(windowNumber) {
            geocoder = new google.maps.Geocoder();
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            };

            maps[windowNumber] = new google.maps.Map(document.getElementById("map_canvas" + windowNumber), mapOptions);
        }

        function FindLocation(location, windowNumber) {
            var map = maps[windowNumber];
            geocoder.geocode({ 'address': location }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
    </script>

In the above script we use an array of maps with a numeric identifier for the map, because we want to have multiple maps opened in multiple windows simultaneously. The above code is for basic map initialization and geolocation. Now let's take a look at the server side logic. First geolocation:

internal static int frmCount = 0;
internal int frmNumber = 0;
private void btnSearch_Click(object sender, EventArgs e)
{
    var location = txtSearch.Text;
    this.SendToClient(string.Format("FindLocation('{0}', {1});", location, frmNum));
}

We use frmNumber for numbering our Windows and keeping each of our map exclusive for every new window created.

private void btnSearch_Click(object sender, EventArgs e)
{
    var location = txtSearch.Text;
    this.SendToClient(string.Format("FindLocation('{0}', {1});", location, frmNumber));
}

And that is how we create new windows:

public GMapsSampleForm()
{
    //Each Form needs unique name otherwise you will be 
    //overriding existing form on the client side
    frmNumber = ++frmCount;
    panGMaps.HTML = "<div id =\"map_canvas" + frmCount.ToString()
        + "\" style=\"width:500px; height:500px\"></div>";
    Name = "MapForm" + frmCount.ToString();            
}

private void btnNewSearch_Click(object sender, EventArgs e)
{            
    GMapsSampleForm frm = new GMapsSampleForm();
    
    //Each Form needs unique name otherwise you will be
    //overriding existing form on the client side            
    frm.Show();
    this.SendToClient(string.Format("initialize({0})", frmCount));
}

Each form needs a unique name so that we can create them on the client side. We use the SendToClient function for a convenient and easy way of invoking JavaScript functions residing on our page. We also use the HTML property of our VisualJS.NET Panel control for simple HTML rendering. In this case the div element with unique IDs for multiple maps rendering.

That is basically all the code we need to achieve that simple scenario. Now we can make multiple searches in Google Maps simultaneously in one browser window using the VisualJS.NET library.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Michał Maniewski
Software Developer
Poland Poland
No Biography provided

Comments and Discussions

 
GeneralMy vote of 4 Pinmembersamthec7-Oct-12 4:02 
QuestionNot an article... PinmvpDave Kreskowiak5-Oct-12 3:25 
QuestionRegarding VisualJS.Net PinmemberTridip Bhattacharjee2-Oct-12 20:40 
AnswerRe: Regarding VisualJS.Net [modified] PinmemberJankinsoo3-Oct-12 8:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 5 Oct 2012
Article Copyright 2012 by Michał Maniewski
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid