Google map API integration(Marker management and clustering) using ColdFusion

We can embedded google map in our ColdFusion project and  create an interactive Google Map application which will dynamically fetch markers and marker information
from database and ColdFusion server.


If we have tens of thousands of markers we want to place on a Google map to provide our users with various information and to do this, the best method would be to have the Google Map make a call to the database for map markers that are within the bounds of the map view port. When the user changes the map (pans, zooms in/out) the view port bounds of the map change and a new database call would be made to fetch all visible markers. Thus only markers that would actually be visible on the current view port would be displayed.

The steps we can follow:

We have to Place the map code on any page at any map size and then make a call to the database for marker info and display it. When the user clicks on the marker another call would be made to the ColdFusion server to dynamically create the content of the info window. Need to handle the query request the map application would make to the server and return the results back to the map application in JSON format. Again we have to create a ".cfm" file to load into the marker info window when the user clicks on the marker.Due to the number of markers that can potentially be displayed on the map Marker Clustering should be utilized to keep things clean and not slow the performance down.

Please find the code base here.

<div id="map-canvas"></div>

//initilize the gmap function here.  
        function initialize() {
        var center = new google.maps.LatLng(4.184, 8.4158)//the map will be shown this latLng on the first load.

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 7,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

            google.maps.event.addListener(map, 'idle', showMarkers);
          
            // Below function is used to set the zoom and call the server for markers.
            function showMarkers(){              
              
                var bounds = map.getBounds();
                var dat = new Date();
                zoomLevel1 = map.getZoom();              
                //Below code to mark the map zoom wheather will change or not.
                google.maps.event.addListener(map, 'zoom_changed', function() {
                        zoomLevel = map.getZoom();
                    if (zoomLevel >= zoomLevel1) {
                        zoomStatus = 'zoom in';
                    } else {
                        zoomStatus ='zoom out';
                    }
                });
              
                //set the zoomStatus as zoom out to show the markers on the first load of gmap.
                if(typeof(zoomStatus) == 'undefined'){
                    zoomStatus = 'zoom out';
                }              
                $("#light").show();
                $("#fade").show();
              
                $.ajax({
                    // call the  server to fetch the bound for different regions.
                    url: "getMarker.cfc?method=pullMarkers&returnformat=json&center="+bounds+"&dat=" + dat,
                    type: "GET",
                    data: {zoomStatus:zoomStatus},
                    dataType:"json",
                    success: function(data){  
                        //validate the data as per the required data type.
                        var rawData = (data)[0];
                        var splitData = (rawData[0].DATA);
                      
                        markers = [];
                        for (i = 0; i < splitData.length; i++) {
                            var latLng = new google.maps.LatLng(splitData[i][0],splitData[i][1]);
                            plmarker(latLng,splitData[i][3],splitData[i][6],splitData[i][5],splitData[i][4]);
                          }
                      
                        //Show all the markers in the clustering method.                  
                        var markerCluster = new MarkerClusterer(map, markers);                      
                                         },
                    error:function(){                        
                                             }
                });  
            }          
            //Function to place the markers in map location after being fetched from server.
            function plmarker(latLng,title,url,mrkrColor,mrkrIcon){
              
                //delete the extra spaces from the icon label.
                markerLabel = $.trim(title);              
                var marker = new google.maps.Marker({
                       position: latLng,
                    map:map,
                    title:markerLabel,
                    draggable:false,
                    url:url,
                    icon:markerIcon
                 });
              
                //Function to show the marker info in info window once a marker is clicked.
                 google.maps.event.addListener(marker, 'click', function(){
                     var boatLaunchURL = this.url;
                     var dat = new Date();
                      $.ajax({
                    // call the server to fetch marker information for a particular marker.
                        url: "getMarker.cfc?method=fetchURLContent&returnformat=json&dat=" + dat,
                        type: "GET",
                        data: {url:boatLaunchURL},
                        dataType:"json",
                        success: function(data){
                                    infoWindow.setContent('<div class="scrollFix">'+data+'</div>');// set the size of the info window.
                                    infoWindow.open(map, marker);
                                    }
                    });
                });
                markers.push(marker);
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        infoWindow = new google.maps.InfoWindow();