DataBaseZone.com
Conrad Muller
Seattle, Washington

Email: conrad at
databasezone
dot com

Google Maps V3 for Iron Speed Designer 7.x through 9.x Web pages


Maps add both value and “sizzle” to applications. All of my recent projects have included interactive maps. If your site is publically available at no charge, or if you can afford to buy a license, Google maps can be integrated into your application in a few steps.

  1. Add divs to display the geographic components on each map page using the Cell Editor.
  2. Create a JavaScript file directory, and download the JavaScript file containing the Map logic. Add an image of the map’s center crosshair to the images directory.
  3. Create a copy of the Master Page you are using, and add two lines of code to the Prolog of the Page Directives and one to the Epilog.
  4. Change each page that includes a map to the new Master Page.
  5. Add a new section to style.css to set display characteristics for the map.
  6. Where do we go from here?

Google supplies the maps and other geographic information from their own servers. We can access the maps and use them in our own projects. Google has made talking to their servers easier by providing a JavaScript library. The library is on a Google server and we load it into our map page with a single line of code in the header of our page.

Our own JavaScript file contains the business logic that manipulates geographic data and displays it using calls to the library and manipulation of the Document Object Model (DOM). For our purposes here, we are only interested in document objects that we have named so that we can display a map or data in them. For example, the map above is displayed in a div named map-canvas.

All of the code in this example is HTML, JavaScript, and CSS.

 

1. Add divs to display the geographic components to your page using the Cell Editor.

Create a cell wide enough for your map by merging cells as necessary. Then add the following to your merged cell using the Cell Editor:

<div id="map">
    <div id="map-canvas"></div>
    <div id="crosshair"></div>
</div>

<div id="info">
    <div id="CenterLatLng">
    </div>
    <div id="Geocode">
        <input id="address" type="text" size="80" value="" />
        <input type="button" value="Geocode" onclick="codeAddress()" />
    </div>
    <div id="ReverseGeocode">
        <div id="formatedAddress"></div><input type="button" value="Reverse Geocode" onclick="reverseGeocode()" />
    </div>
</div>

 

2. Create a JavaScript file directory, and download JavaScript file containing the Map logic. Add an image of the map’s center crosshair to the images directory.

Create a js directory in the application root and download g3map.js into it. This script includes links to map locations I am interested in. You can easily customize the links to any locations you fancy.

Copy crosshair.gif into the Images directory.

 

3. Create a copy of the Master Page you are using and add two lines of code to the Prolog of the Page Directives and one to the Epilog.

I am going to proceed as if you are using VerticalMenu.master for your site. Right-click VerticalMenu.master under Master Pages and chose “Create a Duplicate”. Name the duplicate MapVerticalMenu.master and select it.

Right-click in the grid and choose Page Directives at the bottom of the pop-up menu.

Select VerticalMenu.master.  Your Page Prolog should look something like this after you add two lines between <title></title> and </head>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <meta name="keywords" content="Manager"/>
    <title></title>

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

    </head>
    <body id="Body1" runat="server" class="pBack">
        <form id="Form1" method="post" runat="server">               
            <BaseClasses:ScrollCoordinates id="ScrollCoordinates1" runat="server"></BaseClasses:ScrollCoordinates>
            <BaseClasses:BasePageSettings id="PageSettings" runat="server"></BaseClasses:BasePageSettings>
            <script language="JavaScript" type="text/javascript">{ScriptDirectionTemplate}</script>
            <asp:ScriptManager ID="scriptManager1" runat="server" EnablePartialRendering="True" EnablePageMethods="True" EnableScriptGlobalization="True" EnableScriptLocalization="True" >
                  <Scripts> <asp:ScriptReference Path="~/SetFocus.js" /> </Scripts>  </asp:ScriptManager>

The two lines above attach two JavaScript files, one from Google and the file g3map.js that we downloaded in step 2.

After adding a line to execute the initialize script on page load, your Page Epilog should look like this:

</form>

<script type="text/JavaScript">window.onload = initialize()</script>

    </body>
</html>

 

4. Change any page that includes a map to the new Master Page.

It took me a while to find the page properties dialog box, so I am including some pictures to help anyone else who has the same problem.

First, be certain you have selected the entire page in the grid. Your grid address bar should list just Master Page > YourPage.aspx >

Choose the page level layout.

In the Properties Panel, select (PAGE) from the drop down list at the top. Then select the button at the right of the Display item to open the dialog box.

Choose (PAGE) properties on the drop down.

In the Display Properties dialog box, browse to your new Map enabled Master Page. In my case that is MapVerticalMenu.master.

Choose your new Map enabled Master Page.

 

5. Add a new section to Styles.css to set display characteristics for the map.

You can add this anywhere in the page, but I put it near the top to make it easier to find when I want to edit this section.

/**********************************************************************
 * Map div Styles                                                  *
 **********************************************************************/

div#map {
      position: relative;
}

div#map-canvas{
      border:1px solid #000000;
      margin: 5px 5px 5px 5px;
      width: 1000px;
      height: 600px;
}

div#crosshair {
    position: absolute;
    top: 290px;
    height: 22px;
    width: 22px;
    left: 495px;
    background: url(../../Images/crosshair.gif); // The center crosshair image.
    background-repeat: no-repeat;
    display: block;
    background-position: center center;
}

div#info {
      position: relative;
}

div#CenterLatLng{
      position: relative;
      border:1px solid #000000;
      margin: 5px 0px 0px 0px;
      width: 1000px;
      padding: 5px 0px 0px 5px;
      background-color: #eeeeff;
      text-align:center;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
}

div#Geocode{
      position: relative;
      border:1px solid #000000;
      margin: 5px 0px 0px 0px;
      width: 1000px;
      height: 25px;
      padding: 5px 0px 0px 5px;
      background-color: #eeeeff;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
}

div#ReverseGeocode{
      position: relative;
      border:1px solid #000000;
      margin: 5px 0px 0px 0px;
      width: 1000px;
      height: 25px;
      padding: 5px 0px 0px 5px;
      background-color: #eeeeff;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
}

div#formatedAddress {
      position: relative;
      background-color: #ffffff;
      height: 20px;
      text-align:left;
      float: left;
      width: 500px;
      margin-right: 5px;
}

 

OK, now I have a map on my page. What do I do with it?

This exercise has provided us with much more than just a static map. We have:

The code that returns all of this from Google’s servers is in the g3map.js file. In the basic g3map.js the code is fired by mouse events and button clicks, and the results are displayed in divs below the map. By inspecting the code, you should be able to write similar functions that are activated by buttons and fill in the address, latitude and longitude, or altitude into your own form fields.

Recently I have included maps in several projects or added maps to data entry forms in older projects. People who enter data will love you if they can avoid typing latitudes and longitudes into forms, and the people who use the locations will appreciate the improved accuracy and precision.

A few caveats:

Converting between addresses and lat long is dependent on databases that are not perfect. In urban areas the data are pretty good, but in rural areas the lat and long for an address can be a quarter of a mile off. Since it is easy to adjust manually by scrolling the map, corrections are easy, but human intervention is often required.

Be certain you understand and comply with the Google terms. I am not a lawyer, so I am not going to try and explain them, except to note that sites which are wholly internal require a paid license.

All of Conrad Muller's work on this page is free for your use, but no warrenty is stated or implied.

Home | Resume | Project Portfolio | Writings | Developer Resources | Contact Form