Hi
I'm trying to populate a google map from a cfquery.
I serializeJSON the query then try and use that json object to populate the map.
I'm using code from Gabriel Svennerberg's Google Maps books (see code below),
but my json object from the query looks very different (in format) from the
example json object that Svennerberg shows.
His is in this format:
var json = [
{
"title": "Stockholm",
"lat": 59.3,
"lng": 18.1,
"description": "Stockholm is the capital and the largest city of Sweden and
constitutes the most populated urban area in Scandinavia with a population of
2.1 million in the metropolitan area (2010)"
},
{
"title": "Oslo",
"lat": 59.9,
"lng": 10.8,
"description": "Oslo is a municipality, and the capital and most populous
city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
}
]
and mine is like this:
{"COLUMNS":["BUSINESS_NAME","LATITUDE","LONGITUDE"],"DATA":[["sdfdsf
Books",-36.890408,121.154751],["dsdsdsd
Booksellers",-14.921735,18.602189],["fff ints",-17.8451823,195.0541819]]}
Is there a way I can convert my query to a json object with the same format as
Svennerberg's?
any halp gratefully received
<cfsilent>
<cfquery name="get_map_details" datasource="#application.main_dsn#">
SELECT business_name, latitude, longitude
FROM
tbl_premises
WHERE latitude <> 0
</cfquery>
</cfsilent>
<cfset json_query = serializeJSON(get_map_details,false)>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";></script><script
type="text/javascript">
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-24.327, 140.273),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating a global infoWindow object that will be reused by all
markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json_query.length; i < length; i++) {
var data = json_query[i],
latLng = new google.maps.LatLng(data.latitude,
data.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.business_name
});
}
}
})();
</script>
</head>
<body>
<div id = "map" style="width: 800px; height: 500px; border: 1px solid
#000;"></div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:350808
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
