Display markers on google maps from database.

markers_google_maps

<script type="text/javascript">

    // use of visual refesh is recommended
    google.maps.visualRefresh = true;

    // main map object
    var map;

    // stores all the markers displayed on the map
    var markersArray = [];

    // initialize function
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(34.24361, 71.63583),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    }

    // loads the map on page load
    google.maps.event.addDomListener(window, 'load', initialize);

    // this function is called 
    function toggleKml(theme,tag){

         var my_sel_tag = '';
         var my_theme_tag = '';

         var theme_checked = document.getElementById('theme-' + theme);
         var tag_checked = document.getElementById('tag-' + tag);

         var theme_check_state = 0;
         var tag_check_state = 0;

         if (!!theme_checked) {
             if (theme_checked.checked) {
                theme_check_state = 1;
             }
         }

         if (!!tag_checked) {
             if (tag_checked.checked) {
                tag_check_state = 1;
             }
         }

         if (theme_check_state || tag_check_state) {

             var infoWindow = new google.maps.InfoWindow;

             $.ajax({
                 type: "GET",
                 url: "/ig_home/db_to_markers/",
                 data: {sel_tag: tag, sel_theme: theme},
                 dataType : "xml",
                 success: function(xml) {
                     var markers_count = 0;
                     var objects = $(xml).find("object");

                     var my_markers = "";
                     var my_markers = my_markers + '<markers>';

                     $.each(objects, function(i, object){

                         markers_count = markers_count + 1;
                         var content_name = $("field[name=content_name]",objects[i]).text();
                         var content_type = $("field[name=content_type]",objects[i]).text();
                         var content_source = $("field[name=content_source]",objects[i]).text();
                         var geo_location  = $("field[name=content_geo_location]",objects[i]).text();
                         var content_desc  = $("field[name=content_description]",objects[i]).text();

                     

                         var result_geo_location = geo_location.split(',');
                         var lat = result_geo_location[0];
                         var longitude = result_geo_location[1];

                         lat = parseFloat(lat);
                         longitude = parseFloat(longitude);

                         var html = '<b>' + content_name + '</b> <br/>' + content_description;
                         var point = new google.maps.LatLng(
                              lat,
                              longitude
                         );

                         var marker = new google.maps.Marker({
                              map: map,
                              position: point,
                         });

                         bindInfoWindow(marker, map, infoWindow, html);

                     }); // end each loop
                     function bindInfoWindow(marker, map, infoWindow, html) {
                        google.maps.event.addListener(marker, 'click', function() {
                           infoWindow.setContent(html);
                           infoWindow.open(map, marker);
                        });
                        markersArray.push(marker);
                     }

                     $('div.count-videos').text(markers_count + ' videos added on earth');

                 } // end success
           //parseXml
             }); // end ajax
        } // end if theme is checked
  else {

            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }
    } // end function load kml
  </script>


Folloing code goes into the page


<div class="row">
    <h3>Browse  by following themes</h3>
        {% for theme in themes %}
          <label class="checkbox inline">
            <input type="checkbox" id="theme-{{ theme.theme_name }}" name="theme-{{ theme.theme_name }}" onclick="toggleKml('{{ theme.theme_name }}' , '{{ my_sel_tag }}');"/> {{ theme.theme_name }}
          </label>
        {% endfor %}
  <div class="count-videos"></div>
  <div id="map-canvas" style="height: 550px; width: 850px;"></div>
  </div>