How to make MSSQL query data available to Javascript on a page without having to query the database again?

coldfusion, google-maps-api-3, javascript, sql-server

Solution

What you should do is loop over your query, outputting data from the recordset directly into a Javascript array. Then use this in your JS to loop over, creating markers and infowindows. Something like this:

<script type="text/javascript">
    var arrMarkers = [];

    <cfoutput query="getData">
        arrMarkers.push({
            lat: #getData.lat#,
            lng: #getData.lng#,
            title: '#JSStringFormat(getData.title)#',
            description: '#JSStringFormat(getData.description)#'
        });
    </cfoutput>


    function initialize() { 
        var latlng, marker;

        var infowindow =  new google.maps.InfoWindow({
            content: ""
        });

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom:               15,
            center:             new google.maps.LatLng(51.532315,-0.1544),
            mapTypeId:          google.maps.MapTypeId.ROADMAP
        });

        for (var i = 0; i < arrMarkers.length; i++) {
            latlng = new google.maps.LatLng(arrMarkers[i].lat, arrMarkers[i].lng);
            marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                title: arrMarkers[i].title
            });

            bindInfoWindow(marker, map, infowindow, arrMarkers[i].description);
        }
    }

    function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }
</script>

Problem

For a page I'm making with Google Maps API I need to query multiple marker locations and also further information about each marker. I'm using ColdFusion to query the database. I have mapped out how the process should work roughly ``` <cfquery datasource="mapInfo" name="markerQuery"> Select * from locations </cfquery> <cfset arr = ArrayNew(1)> <cfoutput query="markerQuery"> <cfset marker = {#markerid# = 'new google.maps.LatLng(#markerQuery.lat#,#states.lng#)'}> <cfset arrayAppend(arr,marker)> </cfoutput> <script type="text/javascript" charset="utf-8"> var markers = <cfoutput>#serializeJson(arr)#</cfoutput>; </script> ``` How can I retain the query information in Javascript so I can display it in a text box when a marker (or matching button) is clicked?

Original source