cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post

Google Maps in Orion NPM - How to Video

I've made some changes to the original Google Maps that I introduced about this time last year. This version provides a status icon on the map for each unique latitude and longitude value in the database. I'm leaving the old one up as it is better for environments where a large number of sites exist, and would simply be too cluttered with a status icon at each site.

Prerequisites:

1) Obtain Google API Key for Maps v3

2) Create and populate Custom Properties:

  • Country
  • City
  • Latitude
  • Longitude

Installation:

Copy files to the c:\inetpub\SolarWinds\Orion\GoogleMap\

Update your connection string and API key

Create a view in NPM using the Custom HTML resource, configure iFrame

See the movie (how to install the mod):

2013-07-25_10-43-25 - YouTube

Read the book (asp files, readme, notes on GitHub):

https://gist.github.com/BarefootAtomic/a396a12541ff97a2ce1f

map.png

Enjoy!

Andrew LaGrone, SCP#1368

Labels (1)
Attachments
Comments

Great post,and great addition to our network!!

I added this a few days ago and noticed that the "GoogleMap.aspx" file was giving me a syntax error when trying to load.

After looking in the file I saw that

Line 33 is using "\\" to comment out the line,  Response.Write("Gifs['" & oDR.Item("City") & "'] = '" & oDR.Item("Site_Class") & "-" & oDR.Item("StatusLED") & "';


That is code for HTML, I switched it to the VB comment ' and fixed my issue, just wanted to let everyone know in case they were having the same issue.

First of all let me say this is great and just what I have been looking for however I seem to be having 2 problems that I can't quite figure out.

1. My Custom HTML Resource window only displays a third of the map and I can't figure out how to make it cover the entire resource like in your screen shots.

2. when I click on one of my Cities on the map to zoom to street level it zooms all the way out.

any ideas would be greatly appreciated.

Absolutely phenomenal!  Great work and thanks so much for doing it!  I had all of our sites built out in this, broken down by state, and in a rotating dashboard via Chrome in just a few hours.  Great instructions and I cant tell you how much time it saved me.  Thanks!

This is pretty cool, I plan on implementing this tomorrow in our environment at work thanks for this post!

One thing I suggest is to limit your SQL query portion to only return values that are not NULL for latitude and longitude.

Hi lag

Thanks for this tool, I've got it working per state (actually via postcode in the UK), but as we have large numbers of sites in individual areas I would like to show all of them rather than break it down via state...  How do I sho all the sites via Lat and Long individiually, I am struggling to get this to work..

There's a bit of a trick to it, but you basically take the second map page, and start with that instead.

Thanks for the response lag, and I have done just that ...

I'm using the second map page, but it still only returns values that are associated with states....  I just want to simplify it and return the sites alone even if there are lots of them, but I still end up with sites getting grouped under their State (in my case PostalCode)...  I've tried all sorts of combinations to get it to work, but either end up with a blank page or a scripting error...  Any pointers would be gratefully received....

Hi all,

I need Help for Database, i've nothing when i execute query !

It is likely that you are not getting your SQL Sever or credentials correct if you are returning a blank screen...

Make sure you have the correct details below

oConn = New System.Data.SQLClient.SQLConnection ("server=yoursqlserver; initial catalog=yourdbname;uid=yourdbuser;pwd=yourdbuserpassword")

I use credentials in SWNetPerfMon.db file.

Line 3

Are you using server=SQLSERVER\INSTANCE ?

i try with that now !

server=127.0.0.1\SolarWinds

Before i had  127.0.0.1

In SWNetPerfMon.db, i use that line ?

Sorry, but i've not Loop1_NPM DB

It really depends on where your Solarwinds db is hosted...  Mine is on a separate SQL server...  If yours is hosted locally then you could use the local server name

My SolarWinds it on my Local Server, so my configure is ok ?

But why my query is not ok ? i just use SolarWinds DB, it's that ? 

I not need to create a DB

Goto Solarwinds DB manager under Solarwinds\Advanced Features\DB Manager and you should be able to work out you DB information in there...

Yes, i did that

And my connection SQL is OK !

i've google map on my orion ! SQL query don't work !

Now my query is ok, i configure my nodes with City; Longitude;... but i'ven't nodes on my map !

i change Country = 'US' in my query by Country = 'FR', don't work, map diseppears

Do you have a custom property called Country, and have ALL nodes designated as FR? You can also ignore NULL values in the query. Any empty field will potentially break the map, and ignoring any NULL values in the WHERE part of the query will help get around this problem.

An excellent bit of work this! One question, how would I go about changing the code so that the mouse over text isn't the City custom property but instead is the Node Name and when clicked will take you directly to that node details page?

I've found that the map won't load any more than 51 locations (at least for me). I modified the code slightly to place nodes on the map based on a different custom property. I'm using "Location Name" instead of "City" so each node has its own icon regardless of which city it's in, but I can't imagine that would cause the issue I'm having. Does anyone have a topology with more than 50 cities added to the original map?

Towards the end of the first ASP page (~226), you'll see it reference the next page, which is the information pop-up. Depending on which version you are running, it may be different (MyHack > MyStateHack in my own prod version). That is the page you will want to edit to modify the links for what is inside the information window that pops up on the map.

Hopefully someone has implemented this with more than 50. I only have ~30 sites in mine, so I'm not aware of that limitation.

I can't seems to get it up and running , GoogleMap.aspx shows a blank page.

I have checked each step twice and still no show.

Any help would be greatly appreciated

This will be cool to test out

I can confirm it can go over 50. We are well over in the 100's and works fine. .

Does this still work or has Google maps changed?  I also get a blank page when I browse to the installed GoogleMap.aspx. I have put in the Google developer API key for the maps and triple checked my SQL DB connection info.  Is there any troubleshooting steps I can take?  Should I at least be able to view the Google map if the API key is correct?

Thanks,

Jon

Yes this is still working. First take your entire link http:XXXXXXX/Orion/GoogleMap/GoogleMap.aspx?maptype=TERRAIN&radar=true&state=TX  whatever it may be and open it in another browser window/tab. I use Chrome to "view source" of the html and check if any data is getting through. You can do that by right-clicking the blank page and view source or press CTRL+U.  This ensures that your DB connection is working. I just provided an example of 3 nodes below and what to look for.

Example of the data that should appear when viewing the HTML source.

-----

Gifs['Your Data1'] = 'Up.gif              ';

LatLongs['Your Data1'] = [Your Latitude1, Your Longitude1];

Gifs['Your Data2'] = 'Up.gif              ';

LatLongs['Your Data2'] = [Your Latitude2,Your Latitude2];

Gifs['Your Data3'] = 'Up.gif              ';

LatLongs['Your Data3'] = [Your Latitude3,Your Latitude3];

-----

To test your API Key and/or the Google Map link I did this.

1.  Tryit Editor v1.9

2. Copy and paste this:

<!DOCTYPE html>
<html>
 
<head>
   
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   
<style type="text/css">
      html
{ height: 100% }
      body
{ height: 100%; margin: 0; padding: 0 }
     
#map-canvas { height: 100% }
   
</style>
   
<script type="text/javascript"
     
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
   
</script>
   
<script type="text/javascript">
     
function initialize() {
       
var mapOptions = {
          center
: new google.maps.LatLng(-34.397, 150.644),
          zoom
: 8
       
};
       
var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions
);
     
}
      google
.maps.event.addDomListener(window, 'load', initialize);
   
</script>
 
</head>
 
<body>
   
<div id="map-canvas"/>
 
</body>
</html>

3. Locate the soutce https://maps.googleapis.com/maps/api/js?key=https://maps.googleapis.com/maps/api/js?key=API_KEYAPI_KEY link in the above html and place your API key where it says API_KEY.

4. Alternatively you can test your key by reading this Getting Started - Google Maps JavaScript API v3 — Google Developers

Not sure if this helps or if you have already solved it but... If you put your site names under city then open the 'state' view in a new window(when all sites display), then copy the link information after your google file location, from the browser path and add that under the custom HTML instead. This will open the second map view first, displaying all sites in their appropriate long and lat, bypassing the 'state' view. if that makes sense?

Thank you.

What if there is no data output. Where should I look?

My API key works.

I'm also facing the blank page issue.

Nikk, did you ever fix your problem?                 

Thanks again

*Understanding the structure of things a bit better now, but can still only get a blank page.

When I place http:XXXXXXX/Orion/GoogleMap/GoogleMap.aspx?maptype=TERRAIN&radar=true&state=TX in another tab, I get a blank page. Likewise, no data is present when I view the page source.

I created a R/O user to access the DB. I'm able to query information with it just fine.

I appreciate the help

If you are still getting a blank page try to view any errors that may appear by pressing CTRL+Shift+J in Chrome. If there are any issues with the code it should appear and you can view what line is causing it. Also, run this query below in your  DB and see if all columns are populated with data. This query is from the GoogleMap.aspx page.  I just use the standard Database Manager app that comes with NPM.

SELECT CASE WHEN Status=2 THEN 5 WHEN Status=3 THEN 4 WHEN Status=12 THEN 3 WHEN Status=1 THEN 2 WHEN Status=9 THEN 1 WHEN Status=0 THEN 0 ELSE Status END AS Rank, NodeID,StatusLED,City,Caption,Latitude,Longitude from Nodes where Country = 'US' AND Latitude IS NOT NULL AND Longitude IS NOT NULL AND City IS NOT NULL order by Rank asc, city asc

LAG (Andrew) great job. This was very helpful. I only ran into one issue and was having the blank screen problem too. On the GoogleMaps.aspx file I had to modfiyLine 195 icon: image, was causing a problem. I just had to remove the comma after image and it all worked.

Modify line 195 to read

icon: image

I just had to remove the ,

So, when I run:

SELECT CASE WHEN Status=2 THEN 5 WHEN Status=3 THEN 4 WHEN Status=12 THEN 3 WHEN Status=1 THEN 2 WHEN Status=9 THEN 1 WHEN Status=0 THEN 0 ELSE Status END AS Rank, NodeID,StatusLED,City,Caption,Latitude,Longitude from Nodes where Country = 'US' AND Latitude IS NOT NULL AND Longitude IS NOT NULL AND City IS NOT NULL order by Rank asc, city asc

I get values for everything except my London nodes.

I modified the line to read:

SELECT  CASE WHEN Status=2 THEN 5  WHEN Status=3 THEN 4 WHEN Status=12 THEN 3 WHEN Status=1 THEN 2 WHEN Status=9 THEN 1 WHEN Status=0 THEN 0 ELSE Status END AS Rank, NodeID,StatusLED,City,Caption,Latitude,Longitude from Nodes where Latitude IS NOT NULL AND Longitude IS NOT NULL AND City IS NOT NULL order by Rank asc, city asc

I now see the London nodes in the query output, but I'm still not getting the map.

I also count 290 nodes for the entire network in the query results, which matches my actual node count.

Unfortunately, JMorales13's fix didn't work for me.

Any and all help is appreciated.

The query output your speaking of.. is it visible when you view the source in Chrome now? or the output from the Database Manager?

Also, are there any errors on Chrome when hit press CTRL+Shift+J ?  If your on IE press F12. It may show you Javascript errors. For that comma after the "image" on line 195, IE doesn't like it. For Chrome or FF that comma should be fine but of course better to have cross browser compatibility and remove it . And if you dont mind, can you post or PM the code your seeing when you "View Source" on the browser.

tezt,

Nothing is presented when I "view source'.

However, the below is present in the developer tools under 'sources':

"undefined"==typeof SAFARI&&function(){LEGACY_SAFARI=(SAFARI="undefined"!==typeof safari)&&534>(navigator.appVersion.match(/\sSafari\/(\d+)\./)||[null,0])[1];if(SAFARI){var h=!!safari.extension.bars,l=function(){if(safari.self&&safari.self.addEventListener)return safari.self;if(safari.application&&safari.application.addEventListener)return safari.application;console.log("No add/remove event listener possible at this location!");console.trace();return{addEventListener:function(){},removeEventListener:function(){}}},

d=function(a,b){var c=function(e){e.name==a&&b(e)};l().addEventListener("message",c,!1);return c},f=function(a){if(a&&a.target&&a.target.page&&a.target.page.dispatchMessage)return a.target.page;if((a=safari.self)&&a.tab&&a.tab.dispatchMessage)return a.tab;if((a=(a=safari.application&&safari.application.activeBrowserWindow)&&a.activeTab&&a.activeTab.page)&&a.dispatchMessage)return a;console.log("No dispatchMessage possible at this location!");console.trace();return{dispatchMessage:function(){}}},m=

function(){var a=[],b=0;return function(c){a=a.filter(function(a){return null!=a.browserWindow});void 0==c.id&&(c.id=b+1,b=c.id,a.push(c));return c.id}}();chrome={extension:{getBackgroundPage:function(){return safari.extension.globalPage.contentWindow},getURL:function(a){return safari.extension.baseURI+a},sendRequest:function(){var a=[];h?d("onRequest registration",function(b){b=f(b);-1==a.indexOf(b)&&a.push(b)}):a.push(f());return function(b,c){var e="callback"+Math.random();a.forEach(function(a){a.dispatchMessage("request",

{data:b,callbackToken:e})});var k=d("response",function(a){a.message.callbackToken==e&&(window.setTimeout(function(){var a=k;l().removeEventListener("message",a,!1)},0),c&&c(a.message.data))})}}(),onRequest:{addListener:function(a){h||f().dispatchMessage("onRequest registration",{});d("request",function(b){var c=b.message.data,e={};if(h){var k=m(b.target);e.tab={id:k,url:b.target.url}}a(c,e,function(a){a={callbackToken:b.message.callbackToken,data:a};f(b).dispatchMessage("response",a)})})}},connect:function(a){var b=

"portUuid"+Math.random(),c={name:a.name,uuid:b};f().dispatchMessage("port-create",c);return{name:a.name,onMessage:{addListener:function(a){d("port-postMessage",function(c){c.message.portUuid==b&&a(c.message.data)})}}}},onConnect:{addListener:function(a){d("port-create",function(b){var c=b.message.name,e=b.message.uuid,k=m(b.target);a({name:c,sender:{tab:{id:k,url:b.target.url}},onDisconnect:{addListener:function(){}},postMessage:function(a){f(b).dispatchMessage("port-postMessage",{portUuid:e,data:a})}})})}},

onRequestExternal:{addListener:function(){}}},i18n:function(){function a(a,b){var c=new XMLHttpRequest;c.open("GET",chrome.extension.getURL(a),!1);c.onreadystatechange=function(){4==this.readyState&&""!=this.responseText&&b(this.responseText)};try{c.send()}catch(g){}}function b(a,b){function c(a,b,e){a=a.replace(/\$\$/g,"~~~I18N~~:");a=a.replace(b,e);return a=a.replace(/~~~I18N~~:/g,"$$$$")}if(void 0==a.placeholders&&void 0==b)return a.message.replace(/\$\$/g,"$");var g=/\$([1-9])/g,f=function(a,

c){try{return b[c-1]}catch(e){return""}},d={},h;for(h in a.placeholders){var l=a.placeholders[h].content;d[h.toLowerCase()]=c(l,g,f)}g=c(a.message,g,f);g=c(g,/\$(\w+?)\$/g,function(a,c){var b=c.toLowerCase();return b in d?d[b]:a});return g=g.replace(/\$\$/g,"$")}var c=void 0;return{_getL10nData:function(){var b={locales:[]};b.locales.push(navigator.language.replace("-","_"));2<navigator.language.length&&b.locales.push(navigator.language.substring(0,2));-1==b.locales.indexOf("en")&&b.locales.push("en");

b.messages={};for(var c=0;c<b.locales.length;c++){var d=b.locales[c];a("_locales/"+d+"/messages.json",function(a){b.messages[d]=JSON.parse(a)})}return b},_setL10nData:function(a){c=a},getMessage:function(a,d){void 0==c&&chrome.i18n._setL10nData(chrome.i18n._getL10nData());"string"==typeof d&&(d=[d]);for(var f=0;f<c.locales.length;f++){var g=c.messages[c.locales[f]];if(g&&a in g)return b(g[a],d)}return""}}}()}}}();

I'm all ears. Thanks.

Hey Damian.

I'm not able to recognize any of the code you copied over. The code should look like https://gist.githubusercontent.com/BarefootAtomic/a396a12541ff97a2ce1f/raw/adcca2d6f1e4e0f329e2e2557... minus the VB code.. So really just the Javascript.


It may be possible that the "undefined" message you are receiving is from a missing field you may have not populated. Also is this what you did to view the source below on Safari?

----

Safari menu > Preferences > Advanced.

Check "Show Develop menu in menu bar". Close Safari's preferences.

Develop menu > Show Page Source

---

Hey all,

I, like a few others here, have the same issue with the blank page. No page source info, and when I press ctrl + shitf + J I get the following message when tyring to load the map.

"The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol."


I double and triple checked all of the configurations. Custom Properties are all filled out with no missing info. db connection string and api key are good and in the correct place on the server and the iframe code has the correct servername.

Any ideas where I may have gone wrong? Our nodes are not only in the US. Does this only support US nodes? There were instructions for adding the non-US custom properties and I followed those as well.

Thanks for any help anyone can offer.

jsmith,

I was unable to get Google maps going, and had to abandon effort.

I set up Solarwind's world map, with weather, and got smiles from the boss.

Perhaps you should give it a try.

Sounds good. I have the world map up with my nodes placed. How do I do the weather overlay bit?

One last try..

create an html document in the same GoogleMap folder and paste the html code below (use notepad and save it as an html file). save it to whatever name you want, i saved it as swtest.html. Its basically the same code posted without the VB code, no connecting to the database. its just Static info as you can see in the Commented portion where you see ///////// and no API key to deal with for testing. Once saved. Navigate to that HTML and see if it loads. Mine was http://xxxxxxxxx/Orion/GoogleMap/swtest.html

Here is how it should look. Notice the 3 green dots.. again those are just static longs and lats I placed.

Also note where it has the code:

icon: image

remove the comma since IE doesn't like it.

test.png

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

  html { height: 100% }

  body { height: 100%; margin: 0px; padding: 0px }

  #map_canvas { height: 100% }

</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">

</script>

<script type="text/javascript">

    function getQueryVariable(variable) {

        var query = window.location.search.substring(1);

        var vars = query.split("&");

        for (var i = 0; i < vars.length; i++) {

            var pair = vars[i].split("=");

            if (pair[0] == variable) {

                return pair[1];

            }

        }

       // alert('Query Variable ' + variable + ' not found');

    }

var state;

//Path to custom images in inetpub

// image_dir = '/Orion/images/StatusIcons/';

var image_dir = '/Orion/images/StatusIcons/Small-';

var Gifs = new Array();

var LatLongs = new Array();

///////////BEGIN STATIC TEST INFO ////////////////

state = "TX";

Gifs['Test1'] = 'Up.gif              ';

LatLongs['Test1'] = [36.1700, -119.7462];

Gifs['Test2'] = 'Up.gif              ';

LatLongs['Test2'] = [38.4199, -117.1219];

Gifs['Test3'] = 'Up.gif              ';

LatLongs['Test3'] = [33.7712, -111.3877];

///////////////END STATIC TEST INFO///////////////

var States = new Array();

States['AK'] = [61.3850,-152.2683];

States['AL'] = [32.7990,-86.8073];

States['AR'] = [34.9513,-92.3809];

States['AS'] = [14.2417,-170.7197];

States['AZ'] = [33.7712,-111.3877];

States['CA'] = [36.1700,-119.7462];

States['CO'] = [39.0646,-105.3272];

States['CT'] = [41.5834,-72.7622];

States['DC'] = [38.8964,-77.0262];

States['DE'] = [39.3498,-75.5148];

States['FL'] = [27.8333,-81.7170];

States['GA'] = [32.9866,-83.6487];

States['HI'] = [21.1098,-157.5311];

States['IA'] = [42.0046,-93.2140];

States['ID'] = [44.2394,-114.5103];

States['IL'] = [40.3363,-89.0022];

States['IN'] = [39.8647,-86.2604];

States['KS'] = [38.5111,-96.8005];

States['KY'] = [37.6690,-84.6514];

States['LA'] = [31.1801,-91.8749];

States['MA'] = [42.2373,-71.5314];

States['MD'] = [38.5724,-76.2902];

States['ME'] = [44.6074,-69.3977];

States['MI'] = [43.3504,-84.5603];

States['MN'] = [45.7326,-93.9196];

States['MO'] = [38.4623,-92.3020];

States['MP'] = [14.8058,145.5505];

States['MS'] = [32.7673,-89.6812];

States['MT'] = [46.9048,-110.3261];

States['NC'] = [35.6411,-79.8431];

States['ND'] = [47.5362,-99.7930];

States['NE'] = [41.1289,-98.2883];

States['NH'] = [43.4108,-71.5653];

States['NJ'] = [40.3140,-74.5089];

States['NM'] = [34.8375,-106.2371];

States['NV'] = [38.4199,-117.1219];

States['NY'] = [42.1497,-74.9384];

States['OH'] = [40.3736,-82.7755];

States['OK'] = [35.5376,-96.9247];

States['OR'] = [44.5672,-122.1269];

States['PA'] = [40.5773,-77.2640];

States['PR'] = [18.2766,-66.3350];

States['RI'] = [41.6772,-71.5101];

States['SC'] = [33.8191,-80.9066];

States['SD'] = [44.2853,-99.4632];

States['TN'] = [35.7449,-86.7489];

States['TX'] = [31.1060,-97.6475];

States['UT'] = [40.1135,-111.8535];

States['VA'] = [37.7680,-78.2057];

States['VI'] = [18.0001,-64.8199];

States['VT'] = [44.0407,-72.7093];

States['WA'] = [47.3917,-121.5708];

States['WI'] = [44.2563,-89.6385];

States['WV'] = [38.4680,-80.9696];

States['WY'] = [42.7475,-107.2085];

var map;

var geocoder;

var minlat=90;

var minlon=-180;

var maxlat=0;

var maxlon=0;

function initialize() {

  //alert(getQueryVariable("maptype"));

  var maptype = "TERRAIN";

  if (getQueryVariable("maptype")) {

  maptype = getQueryVariable("maptype");

  }

  var maptypeid = eval("google.maps.MapTypeId." + maptype);

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(States[state][0], States[state][1]);

    var myOptions = {

      zoom: 7,

      center: latlng,

//      mapTypeId: google.maps.MapTypeId.HYBRID

//      mapTypeId: google.maps.MapTypeId.ROADMAP

//      mapTypeId: google.maps.MapTypeId.SATELLITE

//      mapTypeId: google.maps.MapTypeId.TERRAIN

      mapTypeId: maptypeid

    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//if (getQueryVariable("radar")) {

  var imageBounds = new google.maps.LatLngBounds(

  new google.maps.LatLng(22.652538062803,-128.620375523875420),

  new google.maps.LatLng(51.406626367301044,-67.517937876818));

  var radmap = new google.maps.GroundOverlay(

// "http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif",

"http://radblast-mi.wunderground.com/cgi-bin/radar/WUNIDS_composite?maxlat=50.406626367301044&maxlon=...",

  imageBounds);

  radmap.setMap(map);

//}

  var TmpLat = States[state][0];

  var TmpLng = States[state][1];

    for (var wank in Gifs) {

        var image = image_dir+Gifs[wank];

  var marklatlng;

  if (LatLongs[wank][0]) {

  }

  else {

  TmpLat += 0.1;

  //TmpLng += 0.1;

  LatLongs[wank] = [TmpLat, TmpLng];

  }

        marklatlng = new google.maps.LatLng(LatLongs[wank][0], LatLongs[wank][1]);

        var marker = new google.maps.Marker({

        position: marklatlng,

        title: wank,

        map: map,

        icon: image

        });

        attachInfoWindow(marker, wank);

        if (LatLongs[wank][0] < minlat) {

                minlat = LatLongs[wank][0];

        }

        if (LatLongs[wank][0] > maxlat) {

                maxlat = LatLongs[wank][0];

        }

        if (LatLongs[wank][1] > minlon) {

                minlon = LatLongs[wank][1];

        }

        if (LatLongs[wank][1] < maxlon) {

                maxlon = LatLongs[wank][1];

        }

    }

// alert(minlat + " " + maxlat + " " + minlon + " " + maxlon + " Center " + ((minlat + maxlat)/2.000) + "  " + ((minlon + maxlon)/2.000) );

       map.setCenter(new google.maps.LatLng( ((minlat + maxlat)/2.000), ((minlon + maxlon)/2.000) ));

      map.fitBounds(new google.maps.LatLngBounds( new google.maps.LatLng(minlat, maxlon), new google.maps.LatLng(maxlat, minlon) ));

}

function attachInfoWindow(marker, city ) {

  var infowindow = new google.maps.InfoWindow();

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.close();

    infowindow.setContent("<div class='infowindow_content'><iframe src='/Orion/GoogleMap/GoogleMapMenu.aspx?City=" + city + "&State=" + state + "' frameborder=0 width=100% ></iframe</div>");

// infowindow.setContent("City: " + city + "  State: " + state);

    infowindow.open(map,marker);

  });

}

</script>

</head>

<body onload="initialize()">

  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

Any further progress on this?  I am experiencing the exact same blank map issue everyone else here has outlined.  I am able to use your code to generate a map as both an html as well as an aspx.  I am by no means a VB programmer, so I'm not even sure where to start troubleshooting the DB integration issue (which seems to be effecting v11).

Thanks for getting me this far!

Hi,

What browser are you using? When the white page loads, can you provide the "view source" code from the browser. There will be different ways to view the source depending on the browser FYI

Thank you for the quick response.  I've tried both Chrome as well as IE 11.  When loading the blank page (GoogleMaps.aspx) in Chrome I actually receive a blank source page as well.  All that appears is a grey bar on the left side that contains a line number 1 with no code showing at all.  I also tried viewing Javascript errors with the Ctrl+Shift+J, but the only "Elements" that show are:

<html>

  <head>

     <style type="text/css"></style>

  </head>

  <body></body>

</html>

When I "view source" of HTML code (GoogleMaps_1.aspx - which loads correctly as you have your example above) I see the contents of the file I have saved on the server.

Am I right in assuming that something within the VB code is preventing the HTML from being passed to the webpage as nothing shows up in the source page?

Also, are you aware of a way to verify whether my connection string is working?  Based on the testing I've done it seems the reason the map isn't showing is because there are no "Gifs" or "LatLongs" being passed to the Javascript to populate the map.  I verified this by placing your "Static Test Info" in the original GoogleMaps code and was able to produce the map with the 3 points on it.

Thank you again!

Great! That is what I wanted to know. I made a post to check if the nodes are populated correctly by doing this below. Once you verify this, then we can test your DB connection. I'll have to dig some of my notes on how I confirmed the DB connection.

----

tezt Aug 15, 2014 2:59 PM (in response to damiancbessemer)

Also, run this query below in your  DB and see if all columns are populated with data. This query is from the GoogleMap.aspx page.  I just use the standard Database Manager app that comes with NPM.

SELECT CASE WHEN Status=2 THEN 5 WHEN Status=3 THEN 4 WHEN Status=12 THEN 3 WHEN Status=1 THEN 2 WHEN Status=9 THEN 1 WHEN Status=0 THEN 0 ELSE Status END AS Rank, NodeID,StatusLED,City,Caption,Latitude,Longitude from Nodes where Country = 'US' AND Latitude IS NOT NULL AND Longitude IS NOT NULL AND City IS NOT NULL order by Rank asc, city asc

----

I have successfully executed the query using SQL Server Management Studio, and all 97 of my nodes are populated with Rank, NodeID, StatusLED, City, Caption, Latitude, and Longitude columns.  Would running the query through the built in NPM DB Manager have different results do you think?  I'll test it out just to be sure.


Also, in attempt to verify I have the correct connection string I followed a guide on creating a blank .udl file, filling in the data fields, and testing the connection.  I received a "Test connection successful" message when doing this test.  The syntax for the OLE DB is a little different than the VB syntax provided in the GoogleMaps file, but according to the MSDN page on SqlConnection.ConnectionString the options are interchangeable.

I didn't mention this earlier either, but does it matter that my SQL DB is located on the same server?  I've tried the "server=" option with about every possible combination I can think of, including localhost, (local), (localdb), hostname, FDQN, and even just left it blank.  I've double and triple checked everything else that I can imagine, so I'm totally at a loss!

Ok.. so this is the way I tested my connection string.

1. Create a Notepad text file and place it on your desktop or server or where ever you want to test the connection from.

2. Rename the Text file to testconnection.udl and save it with that file extension (udl).

3. Enter your info and Test Conenction. (see pic below)

If its working you should get a "Test connection succeeded" message

EXP: oConn = New System.Data.SQLClient.SQLConnection ("Data Source=YOURDATASOURCE;Integrated Security=False;User ID=YOUUSERID;Password=YOURPASSWORD")


test.png

Version history
Revision #:
1 of 1
Last update:
‎07-25-2013 11:18 AM
Updated by: