Need to build a ColdFusion App that will read international locations from DB and place markers onto world map.

I am interested in finding some code to create a world map with dynamic markers.  My initial thoughts are that I will have a database with various international points and then write a coldfusion page to read the points from the database and place a marker on the world map.  I have been looking online and everything I am finding seems to be far more detailed than what I need (I don’t need to zoom in on a location or get any kind of directions).  I am just looking for a simple world map that can put dots on the map for every location specified in a database.  I would expect to have a maximum of a couple hundred markers.
SherryGAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rucky544Commented:
The Google Map API would do this nicely, It does has the zoom features etc. which you didn't require but it is so easy to integrate with that it would be the ideal solution.
You simply need to have the Geocodes for all your markers stored in a database, then plot them on.
0
jduawaCommented:
you can use the google maps API
0
rucky544Commented:
you can find an excellent tutorial here: http://www.econym.demon.co.uk/googlemaps/

Simply place your dynamic content in to the Javascript
0
10 Tips to Protect Your Business from Ransomware

Did you know that ransomware is the most widespread, destructive malware in the world today? It accounts for 39% of all security breaches, with ransomware gangsters projected to make $11.5B in profits from online extortion by 2019.

SherryGAuthor Commented:
I have briefly looked at the Google Maps API and it is far more robust than what I am looking for.  I was hoping for just a simple app that without any bells and whistles that would require disabling.  
0
rucky544Commented:
Google maps is very simple to use and you dont have to include the zoom or the satellite views if you dont want to.

Just set the zoom level to show the entire world...

As far as i know this is going to be your easiest solution
0
SherryGAuthor Commented:
OK.  I have been messing with Google Maps API and I think I could potentially make that work if I can get data from an access database into an .xml file with the correct formatting.  For instance,  I have a databse with a table called locations.  The locations table contains two fields, latitude and longitude.  I need to export each record into a .xml file in the format:
<markers>
<marker lat="37.322" lng=" -121.213"/>
<marker lat="35.4358" lng=" -7.14333"/>
<marker lat="24" lng="90"/>
</markers>
Any thoughts?
0
jduawaCommented:
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<cfquery name="getData" datasource="#DSN#">
your query here
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rucky544Commented:
why do you need it in XML... you can just loop over the query and output it in the javascript.
Like this:

<!--- Plot Accommodation --->
<cfoutput query="q_accom">
<cfif (isdefined("xcoord") and #xcoord# neq "") and (isdefined("ycoord") and #ycoord# neq "")>
<!--- Clean ' out of outputs --->
<cfset NewEstName = #jsstringformat(EstName)#>
            // obtain the attribues of each marker
            var lat = #ycoord#;
            var lng = #xcoord#;
            var point = new GLatLng(lat,lng);
            var html = '<div class="mapinfo">#EstName#</div>';
var label = '#NewEstName#';
var icontype = 0;
// create the marker
var marker = createMarker(point,label,html,icontype);
map.addOverlay(marker);
</cfif>
</cfoutput>

That is what i have used very successfully
0
jduawaCommented:
i have used the XML way, both will work...
0
SherryGAuthor Commented:
jduawa...how do i get the info from the screen in to an actual file (data.xml).

or....

rucky544...this is the code I have using the xml file.  I am not sure how to convert it to using the javascript as you are suggesting.

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFFZqRBA48pKOe6XHZPI7wyBS-gqcgm92WorltHgtz1cdU8H7bxhS4uEyZxqkUug4bDFgEPwrM38AOPg"
      type="text/javascript"></script>
    <script type="text/javascript">
       function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(35.4358, 7.1433), 1 );
            
            var icon = new GIcon();
            icon.image = "http://www.x.x.x/x/x/x/icon.png";
            
            icon.iconSize = new GSize(7, 7);
            icon.shadowSize = new GSize(0, 0);
            icon.iconAnchor = new GPoint(0, 0);
            icon.infoWindowAnchor = new GPoint(0, 0);
                              
      GDownloadUrl("/x/x/x/data.xml", function(data) {  
      var xml = GXml.parse(data);  
      var markers = xml.documentElement.getElementsByTagName("marker");  
      for (var i = 0; i < markers.length; i++) {    
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            
                                                parseFloat(markers[i].getAttribute("lng")));    
            map.addOverlay(new GMarker(point, icon));  
            }
      });
    }
      }
            </script>
0
rucky544Commented:
just use the very basic google map example and instead of entering your own text, use dynamic text from the database.
Then loop over it with the query.
0
jduawaCommented:
GDownloadUrl("../xml/data.cfm");
the file would be a .cfm file but because of the content type tag is will appear as an xml doc...
0
SherryGAuthor Commented:
I think i figured out how to get the data to write to a xml file. ..

I have two files getdata.cfm and getlocals.cfm

-------Begin getdata.cfm-------
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<cfquery name="getData" datasource="internationals">
select latitude, longitude from places
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
-------End getdata.cfm-------

-------Begin getlocals.cfm-------
<title>Retrieve Locals</title>
<cfhttp url="http://x.x.x.x/getdata.cfm" method="get" resolveurl="false">
<cfset FileContents=#cfhttp.filecontent#>
<cffile action="Write" ADDNEWLINE="No" file="\\x\x\data.xml" output="#Trim(FileContents)#">
-------End getlocals.cfm-------

I need to do some additional testing...but I think this might work for me.  Do you see any reason that I shouldn't use this method?
0
jduawaCommented:
just call the .cfm file...it will look like XML to google because of the content type
0
SherryGAuthor Commented:
jduawa...yes...that worked...i will post my final solution in just a little bit.
0
SherryGAuthor Commented:
Below is the code that worked for me.  There are two files that make up this solution...the map.htm file which displays the map with markers and the getdata.cfm file which calls the markers from my database.

-----START MAP.HTM-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>International Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFFZqRBA48pKOe6XHZPI7wyBS-gqcgm92WorltHgtz1cdU8H7txhS4uEyZxqkUug4bDFgEPwrM38AOPg"
      type="text/javascript"></script>
    <script type="text/javascript">
       function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(35.4358, 7.1433), 1 );
            
            var icon = new GIcon();
            icon.image = "http://www.x.x.x/x/icon.png";
            
            icon.iconSize = new GSize(7, 7);
            icon.shadowSize = new GSize(0, 0);
            icon.iconAnchor = new GPoint(0, 0);
            icon.infoWindowAnchor = new GPoint(0, 0);
                              
      GDownloadUrl("/x/x/x/getdata.cfm", function(data) {  
      var xml = GXml.parse(data);  
      var markers = xml.documentElement.getElementsByTagName("marker");  
      for (var i = 0; i < markers.length; i++) {    
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            
                                                parseFloat(markers[i].getAttribute("lng")));    
            map.addOverlay(new GMarker(point, icon));  
            }
      });
    }
      }
            </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
-----END MAP.HTM-----

-----START GETDATA.CFM-----
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<cfquery name="getData" datasource="internationals">
select latitude, longitude from places
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
-----END GETDATA.CFM-----



0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.