XMod Pro - DotNetNuke - Google Maps

Question

I'm trying to get some old code working with the latest Google Maps API. But probably like a majority of the people asking questions, have zero experience with Javascript let alone the API. If someone could assist, I'd greatly appreciate any help in getting this working properly. Thanks..

The module is the XMod Pro module for DNN. This allows you many options and it's a very powerful module to create items for your webpages, etc. Sometime ago, someone posting information about how to get the Google Maps API working within XMod Pro. The lat and long information about a location is coming from a database where people enter the information about a location. The markers are then put onto the map; which is a standard DIV on the page as well. XMod Pro labels this database information with a double-bracket; e.g. [[Title]] for the title.

When someone clicks on the link for location title, it's to take them to that location on the map and show them information (again from the database) in the pop-up. This portion isn't working; nor any of the marker information.

I believe the issue is with the JavaScript, but what exactly is causing the issues, I don't know.

Below is the XMod Pro code and most of the pertinent information is stored within the . Thank you again..

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

Nick Nick · Accepted Answer · 2012-05-29T19:54:25

Does it bring up any errors/messages in Inspector or Firebug?

In Google Maps API V5, my addMarker code was something like the below, where I've placed the infoWindow content straight into the marker.

function addMarker(map, latitude, longitude, heading, title, content){

        var latlong = new google.maps.LatLng(latitude, longitude);
        var markerOptions = {
        position: latlong,
        map: map,
        title: title,
        clickable: true,
        icon: 'marker.png',
    };

        //create marker object
        var marker = new google.maps.Marker(markerOptions);
        var infoWindowOptions = {
        content: content,
        position: latlong
    };

        //info window object
    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

        //add click event listener on marker, to bring up infoWindow
    google.maps.event.addListener(marker, "click",function(){
        infoWindow.open(map);
    });
}

When I was working on this, I used alot the documentation here: developers.google.com/maps/documentation/javascript/overlays for Overlays and Markers

I'm sorry I do not know about XMode Pro, but maybe you could note some differences from the old API to the new.

XMod Pro - DotNetNuke - Google Maps

1 Answers