tags:

views:

380

answers:

2
+5  Q: 

Loading city/state from SQL Server to Google Maps?

I'm trying to make a small application that takes a city & state and geocodes that address to a lat/long location. Right now I am utilizing Google Map's API, ColdFusion, and SQL Server. Basically the city and state fields are in a database table and I want to take those locations and get marker put on a Google Map showing where they are.

This is my code to do the geocoding, and viewing the source of the page shows that it is correctly looping through my query and placing a location ("Omaha, NE") in the address field, but no marker, or map for that matter, is showing up on the page:

function codeAddress() {
<cfloop query="GetLocations">
    var address = document.getElementById(<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>).value;
      if (geocoder) {
         geocoder.geocode( {<cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>: address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             var marker = new google.maps.Marker({
             map: map, 
             position: results[0].geometry.location,
             title: <cfoutput>#Trim(hometown)#,#Trim(state)#</cfoutput>
             });
         } else {
            alert("Geocode was not successful for the following reason: " + status);
            }
         });
      }     
</cfloop> }

And here is the code to initialize the map:

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.4167,-90.4290);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          title: "Test"
      });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

I do have a map working that uses lat/long that was hard coded into the database table, but I want to be able to just use the city/state and convert that to a lat/long. Any suggestions or direction? Storing the lat/long in the database is also possible, but I don't know how to do that within SQL.

+2  A: 

You need to actually add the marker to the map using the addOverlay method:

var point = new GLatLng(...);
map.addOverlay(new GMarker(point));

You can also add instances of the Marker class to your map:

map.addOverlay(marker);

See the Map Overlays docs:

http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html

Cody Caughlan  2010-05-25 00:09:46
+4  A: 

You may want to consider the following example:

Using the V2 API:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false"
          type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

  <div id="map_canvas" style="width: 400px; height: 300px"></div> 

  <script type="text/javascript"> 

    // Prepare this list from ColdFusion
    var locations = [
       'New York, NY',
       'Los Angeles, CA',
       'Chicago, IL',
       'Houston, TX',
       'Phoenix, AZ'
    ];

    if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map_canvas"));

       var geocoder = new GClientGeocoder();
       var index = 0;

       var geocoderFunction = function () { 
          geocoder.getLatLng(locations[index], function (point) {    
             if (point) {
                map.addOverlay(new GMarker(point));                
             }

             // Call the geocoder with a 100ms delay
             index++;
             if (locations.length > index) {
                setTimeout(geocoderFunction, 100);
             }
          });
       }

       map.setCenter(new GLatLng(38.00, -100.00), 3);

       // Launch the geocoding process
       geocoderFunction();
    }
  </script> 
</body>
</html>

Using the V3 API:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body> 

  <div id="map_canvas" style="width: 400px; height: 300px"></div> 

  <script type="text/javascript"> 

    // Prepare this list from ColdFusion
    var locations = [
       'New York, NY',
       'Los Angeles, CA',
       'Chicago, IL',
       'Houston, TX',
       'Phoenix, AZ'
    ];

    var mapOpt = { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       center: new google.maps.LatLng(38.00, -100.00),
       zoom: 3
    };

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

    var geocoder = new google.maps.Geocoder();
    var index = 0;

    var geocoderFunction = function () { 
       geocoder.geocode({ 'address': locations[index] }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
             new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
             });             
          }

          // Call the geocoder with a 100ms delay
          index++;
          if (locations.length > index) {
             setTimeout(geocoderFunction, 100);
          }
       });
    }

    // Launch the geocoding process
    geocoderFunction();
  </script> 
</body>
</html>

All you need to do is to render the JavaScript array locations from ColdFusion, instead of using the hardcoded one in the example.

Screenshot from the above example:

Google Maps API Geocoding Demo

Daniel Vassallo  2010-05-25 00:25:05
Thank you very much Daniel, I did as you said and converted my query to an array inside the locations variable and output it. Worked like a charm!
knawlejj  2010-05-25 03:07:42
@knawlejj: That's good news. I'm glad it worked :)
Daniel Vassallo  2010-05-25 03:09:42

related questions

Sql to query a dbs scheme
Transform Columns into Rows
SQL Client for Mac OS X that works with MS SQL Server
How do you get leading wildcard full-text searches to work in SQL Server?
SQL Server 2000: Is there a way to tell when a record was last modified?
What's the BEST way to remove the time portion of a datetime value (SQL Server)
I need to know how much disk space a table is using in SQL Server
What's the best way to determine if a temporary table exists in SQL Server?
Appropriate pagefile size for SQL Server
Have you ever encountered a query that SQL Server could not execute because it referenced too many tables?
ASP.NET MVC "CRUD" Database Sample
How do I unit test persistence?
Best Book for a new Database Developer
Can I logically reorder columns in a table?
Best way to copy a database in SQL Server 2005/8?
Is Windows Server 2008 "Server Core" appropriate for a SQL Server instance?
Why doesn't SQL Full Text Indexing return results for words containing #?
Client collation and SQL Server 2005
Editing database records by multiple users
Deploying SQL Server Databases from Test to Live
SQL Server 2005 implementation of MySQL REPLACE INTO?
Upgrading SQL Server 6.5
How do I version my MS SQL database in SVN?
How to export data from SQL Server 2005 to MySQL
Check for changes to a SQL table?