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: http://www.dotnetnuke.com/Products/Development/Forge/ModuleMap/Downloads/tabid/968/Default.aspx

Get Google Map license key: http://code.google.com/apis/maps/signup.html

Google Map tutorials:

PDF user guide: http://www.dotnetnuke.com/LinkClick.aspx?fileticket=wX7EgjU7bg0%3d&tabid=968&mid=3231

Video tutorial: http://www.dotnetnuke.com/LinkClick.aspx?fileticket=4Y4sWfTNHvE%3d&tabid=968&mid=3232

Goggle Map and OWS working together

Example1

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;

}

</script>

<style>

#dnn_ctr419_ContentPane .Normal img {

padding:0px !important;

border:none !important;

background:none !important;

margin-left:0 !important;

margin-top:0 !important;

}

 

</style>

 

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

<h3>FIND LOCATION</h3>

<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>

{SUBQUERY,NAME="State",

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

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

}

</select>

 

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

</div>

 

 

 

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">

<h3>FIND LOCATION</h3>

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

            <tr>

                <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>

 

            </tr>

      

        <tr>

<td />

                <td  >

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

</td>

        </tr>

    </table>

</div>

 

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:

INSERT INTO Map_Points(

SourceID,Guid,

Address,

IconIndex,

Longitude,Latitude,

Description,

SequenceNumber,SequenceInfo,ZoomShow,ZoomHide,SummaryCount,actionPlot,ActionCLick,ActionOpen,FailedGeo,isUser

) values

(

1,null,

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

0,

null,null,

'<div>

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

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

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

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

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

      + '</div>

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

</div>',

1,'',0,0,0,'','','',null,0

)

 

Average (0 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share