-
-
Save Nemeziz/f373f518959274d62a9b to your computer and use it in GitHub Desktop.
Display markers on google maps from database.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment