Written by:Will
4/25/2009 

Even though there is a Map Module available to DotNetNuke, I had a need to use the Live Maps, instead of the default Google Maps.  I found a couple of modules that looked to provide the Live Maps, but the project I was working on didn’t have a budget to purchase any of the modules.  A friend sent me a snippet of code to get me started with the map, and everything sky-rocketed from there!

First of all, the easiest and most reliable way to get the map properly initiated on page load requires a bit of jQuery.  I have posts that can help you include jQuery in your DNN site, if you are not yet upgraded to version 5.  DNN Version 5.00.00 and higher have jQuery support out of the box.  No modifications are necessary.

• Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
• Add jQuery Support to Pre-DNN 5 Sites Using PageBlaster

Once you have jQuery added to your site, we can move on.  Add a Text/HTML Module to your page.  Go to edit the text of the Text/HTML Module.  Make sure that you switch to the Basic Text Box view, and then to HTML mode.

Now comes the fun part.  Add some HTML to the textbox to load the map into.  Also, be sure to include the script for the Live Maps client-side API.  Here is a snippet:

<divid="mapDiv"style="position:relative;display: block; width:550px; height:600px;"></div>

<scriptlanguage="javascript"type="text/javascript"src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

Note in the previous example that we added a little bit of CSS to it.  The Live Map will use the width and height of the DIV element.  You will once again want to add an open and close script tag, but this one will actually contain JavaScript, and not reference a file.  Here is an example of the minimum amount of JavaScript required to render the Live Map.

var map = null;

function GetMap() {

var msftOffice = new VELatLong(27.943952742864315, -82.53719329833984);

    map = new VEMap('map689');

    map.LoadMap(msftOffice, 14, VEMapStyle.Road, false);

/* need to add pushpin */

var msftOfficeShape = new VEShape(VEShapeType.Pushpin, msftOffice);

    msftOfficeShape.SetTitle('Microsoft Tampa');

    msftOfficeShape.SetDescription('<img src="http://dayofdnn.com/Portals/4/logo_dodnn_80x66.jpg" alt="Day of DotNetNuke" align="left" style="padding:0px 5px 5px 0px;border:none;" />5426 Bay Center Dr.<br/>Suite 700<br/>Tampa, FL 33609');

    msftOfficeShape.SetMoreInfoURL('http://www.microsoft.com/about/companyinformation/usaoffices/southeast/tampa.mspx');

    map.AddShape(msftOfficeShape);

}

jQuery(document).ready(function() { GetMap(); } );

Now that you have that script, you will already be able to view the Live map on your website once you save your changes.  Let’s talk about the JavaScript for just a moment though.

The first thing that is done is to add a global map object.  In this example, putting it outside of the function allows the map to be referenced in other functions.  The GetMap() function contains all of the map code.  First, a coordinates object is created referencing the latitude and longitude for a map pushpin (marker).  We can get the latitude and longitude from any number of places.  Do a web search to find any number of free sites to do this for you.  In this example, our pushpin will be marking the Microsoft office in Tampa, FL.

Next, we create a new map object, and we inform the code to inject the map into the mapDiv DIV element.  The LoadMap method is called next, centering the map on the latitude and longitude we specified, the zoom level, and the map view type.

Technically, we could stop there, but I also add a pushpin at this step to illustrate a map with a single pushpin in the center.  We specify the title that will be shown in the information popup, a description inside the popup, and a more information URL.  Note that we can use HTML in the description.

The final step here uses jQuery to call the map method after the page has loaded, and all elements are rendered.  We could have also used the DNN Client API to do this, but I find it to be inconsistent if you have other client-side code on the page.

Another cool thing that you can do is to change the default icon to use something you might find to be more relevant.  Using the previous example, just add this line of JavaScript before the shape is added to the map.

msftOfficeShape.SetCustomIcon('http://dayofdnn.com/Portals/4/logo_dodnn_40x33.jpg');

Now that you have the basics for adding a single pushpin to the map, know that you can add as many pushpins as you want.  Using this technique, I managed the map for the Day of DotNetNuke.  See the map in action!

TrackbackPrint

Tags:

Categories:DotNetNuke

Location: BlogsThe Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel