Google Map Module And OWS

By Kateryna Sytnyk

December 24, 2008

Google Map Summary Info

First of all, here is the summary of what you may find useful when using Google Map module:

Google Map Downloads:

Module download:

Get Google Map license key:

Google Map tutorials:

PDF user guide:

Video tutorial:

Goggle Map and OWS working together


Say, you have a list of distributor centers located in different states. You need to display centers on the map based on the state. So, in the Map module you will use a Custom Query as a datasource:
select * from Map_points
where Address like '% ' + @State + ' %'
where @State is a form Variable: Type: Form Source: frmState Target: @State Modify the Search Template: When the value is selected from the drop down, it gets stored in the hidden field on the form ("hidden_state" in this example ). Make sure you set "Textbox Element ID" in the Google Maps module to "hidden_state". Finally, here is a code snippet that you would use for a Search Template:
<script type = "text/javascript">

function SaveState()


var hiddenState = document.getElementById("zipcode");

var state = document.getElementById("frmState");

var stateIndex  = state.selectedIndex;

hiddenState.value = state.options[stateIndex].innerHTML;




#dnn_ctr419_ContentPane .Normal img {

padding:0px !important;

border:none !important;

background:none !important;

margin-left:0 !important;

margin-top:0 !important;





<div id="FindLocation" class="Normal">


<input type="hidden" name="hidden_state" id="hidden_state" />

<label for="State">Select a State:   </label>&nbsp&nbsp&nbsp&nbsp

<select id="frmState" name="frmState" onchange = "SaveState()">

<option value = ""></option>


  QUERY="Select * from Lists where ParentID =221",

FORMAT="<option value='[Value]'>[Text]</option>"




       <input type = "button" value = "Find" name="SearchButton" id="SearchButton" onclick="if (typeof(Page_SmartValidate) == 'function') if(Page_SmartValidate()) {runSearch(sFilter); return false;}"/>





Example 2

Here is a search template for entering zip code in a text field, implemented with OWS Search Template:

<div id="FindLocation" class="Normal">


<table cellpadding="0" cellspacing="0" border="0" width="100%">


                <td valign="top"><label for="zipcode">Location <br />Enter zip OR city/state</label></td>

           <td> <input type="text" name="zipcode" id="zipcode"  value="[FORMAT,[zipcode,form],{ENCODEHTML}]"/><br />

<span id="vZip" controltovalidate="zipcode" errormessage="This is a required field" display="Dynamic" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">Zip code is a required field</span></td>





<td />

                <td  >

<input type="button" name="SearchButton" id="SearchButton" value="Find" onclick="if (typeof(Page_SmartValidate) == 'function') if(Page_SmartValidate()) \{runSearch(sFilter); return false; \}">






Make sure you : Add the following style to the google map container:


#dnn_ctr419_ContentPane .Normal img {

padding:0px !important;

border:none !important;

background:none !important;

margin-left:0 !important;

margin-top:0 !important;


In some cases the images on the map appear blank, because they are affected by main styling on the page.

Importing data in Map_Points table

In some projects there is a requirement to make some entities list searchable in the Google Map module. This can be achieved by importing the locations along with entity descriptions to Map_Points table. Often times, entity information comes in Excel spreadsheet. It needs to be imported in the database via Import Wizard. Then the configuration should be modified accordingly. The module can be placed on any page and deleted after importing is completed. The complete source for the import configuration is attached. Here's the query used in the example:








) values



isnull('[Street,SelectDistributorsData]' + ' ','') + isnull('[City,SelectDistributorsData]' + ' ','') + isnull('[State,SelectDistributorsData]' + ' ','') + isnull('[PostalCode,SelectDistributorsData]',''),




      <div style = "width:50%; float:left;">

      <strong>' + '[Company,SelectDistributorsData]'+'</strong><br/>' + isnull('[Street,SelectDistributorsData]<br />', '') + '[City,SelectDistributorsData]'+' '+'[State,SelectDistributorsData]'+' '+'[PostalCode,SelectDistributorsData]'+'<br />' +


      -- +isnull('[Email,SelectDistributorsData]<br/>','')


      + '</div>

      <div  style = "clear:both;" name = "divider"> <br/></div>





Average (0 Ratings):
Want to help out?

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA •

Bookmark & Share Bookmark and Share