XMod Pro & Javascript

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

Home

Using DNN Platf...

Using Modules a...

XMod Pro & Javascript - Google Maps

5/29/2012 2:03 PM

Jeff M.

Joined: 7/30/2009

Posts: 422

XMod Pro & Javascript - Google Maps

Hello..
There was a posting on the XMod Pro forums about a Google Maps configuration with XMod Pro to create a nice module. Except it appears as though the Javascript within isn't working properly.

There isn't many responses within the XMod Pro forum about this and I was wondering how I can troubleshoot this to get this working with DNN 6.1.5; it appears to be working fine on a demo website running a previous version of DNN.

I'm not strong in Javascript, so I was wondering if anyone could give me pointers on how to troubleshoot this and get things working.

Thanks.. -Jeff

5/29/2012 2:09 PM

Jeff M.

Joined: 7/30/2009

Posts: 422

Re: XMod Pro & Javascript - Google Maps


<xmod:template addroles="Administrators" editroles="Administrators" deleteroles="Administrators">





    <listdatasource commandtext="SELECT h.ID, ht.HavenType, h.Lat, h.Long, h.Title, h.Description, h.Country, h.Region, h.Email, h.Phone, h.Web, h.CreatedBy, h.LastUpdatedBy FROM CD_Havens h inner join CD_HavenType ht on h.Type=ht.ID order by h.ID" />

    

    <headertemplate>

      <a name="HeaderTop"></a>

      <div width="150px" height="40px" style="color:black;background-color:white;padding-bottom:10px;font-family:Georgia;font-size:14px"><strong>Click an Item</strong></div>  

    

    </headertemplate>





<itemtemplate>





<script type="text/javascript">

    var i = i + 1;

    x[i] = [[Lat]];

    y[i] = [[Long]];

    d[i] = '<table><tr><td>[[Title]]</td></tr><tr><td>[[Description]]</td></tr><tr><td>[[Country]]</td></tr><tr><td>[[Region]]</td></tr><tr><td>[[Email]]</td></tr></table>';

   document.write('<div style="padding-bottom:8px;color:black;background-color:white" width="150px" onclick="myGclick(' + i + ');">')

</script>





<strong>

<table>

<tr><td colspan="2"><a href="#HeaderTop"><div style="color: #a41d21;font-size: 13px">[[Title]]</div></a></td></tr>

<tr><td colspan="2">[[Description]]</td></tr>

<tr><td>[[Country]]</td><td>[[Region]]</td></tr>

</table>





</div>









    <xmod:scriptblock scriptid="GoogleMapScripts" registeronce="true" blocktype="ClientScript">

          <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAHrao_r7BKX4cQI0SxCQVHxRXbr2uTTbz5TwhEXAt1Cz65pgUPxQJAHBbHO1MuQeh5aRNkFOL-Ozptw" type="text/javascript"></script>

    <script type="text/javascript">

    //<![CDATA[





     var map = null;

    var geocoder = null;

      var x=new Array()

      var y=new Array()

      var d=new Array()

      var myGclick = [];

      var gmarkers = [];





      // This function picks up the click and opens the corresponding info window

      myGclick = function myGclick(i) {

        GEvent.trigger(gmarkers[i], "click");

      }





oldLoad = window.onload;

window.onload = function load(){

 if(oldLoad){

  oldLoad();

  }

      if (GBrowserIsCompatible()) {





    var map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(40, -98), 3);

        map.addControl(new GLargeMapControl());

        map.addControl(new GMapTypeControl());

        map.addControl(new GOverviewMapControl());





// Creates a marker at the given point with the given number label

function createMarker(point, d) {

  var marker = new GMarker(point);

  GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml(d);

  });

        // save the info we need to use later for the side_bar

        gmarkers[i] = marker;

  return marker;

}





for (var i = 0; i < 999; i++) {

  var point = new GLatLng(x[i],

                          y[i]);

if ((x[i] == undefined)){break}

  map.addOverlay(createMarker(point, d[i]));

}

 

}

}





    //]]>

    </script>

    </xmod:scriptblock>

 

</itemtemplate>





    <footertemplate>

    

    </footertemplate>

    <noitemstemplate>

    <strong>nothing in table</strong>

    </noitemstemplate>





    <detailtemplate>

    </detailtemplate>





  </xmod:template>

This template grabs information from the database and is suppose to display point on a google map which is another simple HTML module on the same page:

When you click on a location link (within the Itemtemplate), when it works properly, it'll move to that point on the map; this isn't what working properly.

I think DNN is blocking the Javascript somehow. Any suggestions would greatly be appreciated.

Thanks..

5/29/2012 2:11 PM

Jeff M.

Joined: 7/30/2009

Posts: 422

Re: XMod Pro & Javascript - Google Maps

Using firebug, this is what's being displayed for the locations:

<div onclick="myGclick(NaN);" width="150px" style="padding-bottom:8px;color:black;background-color:white">

<strong>
<table>
<tbody><tr><td colspan="2"><a href="#HeaderTop"><div style="color: #a41d21;font-size: 13px">Ses Salines</div></a></td></tr>
<tr><td colspan="2">Anchorage off Ses Salines village</td></tr>
<tr><td>Spain</td><td>Minorca: Balearics</td></tr>
</tbody></table>

</strong></div>

5/29/2012 2:24 PM

Jeff M.

Joined: 7/30/2009

Posts: 422

Re: XMod Pro & Javascript - Google Maps

This is what the working website looks like for the DIV:

<div onclick="myGclick(0);" width="150px" style="padding-bottom:8px;color:black;background-color:white">

<strong>
<table>
<tbody><tr><td colspan="2"><a href="#HeaderTop"><div style="color: #a41d21;font-size: 13px">Ses Salines</div></a></td></tr>
<tr><td colspan="2">Anchorage off Ses Salines village</td></tr>
<tr><td>Spain</td><td>Minorca: Balearics</td></tr>
</tbody></table>

</strong></div>

6/20/2013 10:37 AM

Shaun Visser

Joined: 7/4/2012

Posts: 15

Re: XMod Pro & Javascript - Google Maps

Sorry for commenting on such an old thread, but - bump!

Page 1 of 1

Home

Using DNN Platf...

Using Modules a...

XMod Pro & Javascript - Google Maps

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)