Geek Answers Handbook

Loading city / state from SQL Server to Google Maps?

I am trying to make a small application that accepts the city, state, and geocodes that access the lat / long node. I am currently using the Google Map, ColdFusion, and SQL Server APIs. Basically, the city and state fields are in the database table, and I want to take these places and put a marker on the Google map showing where they are.

This is my geocoding code, and viewing the page source shows that it correctly iterates over my request and places a place ("Omaha, NE") in the address field, but not a marker or map, for that matter, it is displayed 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 card:

 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 have a job with a map that uses lat / long, which was hardcoded in the database table, but I want to be able to just use the city / state and convert it to lat / long. Any suggestions or directions? Saving lat / long in a database is also possible, but I don't know how to do this in SQL.

+6
javascript coldfusion sql-server google-maps geocoding
source share
2 answers

You can consider the following example:

Using API V2 :

 <!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;v=2&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 API V3 :

 <!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 have to do is display an array of JavaScript locations from ColdFusion, instead of using hardcoded in this example.

Screenshot from the above example:

Google Maps API Geocoding Demo

+4
source share

You need to add a 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 Card Overlay Documents:

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

+2
source share

More articles:


All Articles