Guest User

Untitled

a guest
Sep 14th, 2018
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.35 KB | None | 0 0
  1. Google Map api markers Javascript
  2. var MeetingType = document.getElementById("Meeting_Type");
  3. var type = MeetingType.options[MeetingType.selectedIndex].text;
  4. var DayofMeeting = document.getElementById("Day_of_Meeting");
  5. var day = DayofMeeting.options[DayofMeeting.selectedIndex].text;
  6. var TimeofMeeting = document.getElementById("Time_of_Meeting");
  7. var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text;
  8.  
  9. for (var i = 0; i < placemarkers.length; i++) {
  10. if (placemarkers[i].type==type&&placemarkers[i].day==day&&placemarkers[i].time==time){
  11. placemarkers[i].setMap(MYMAP.map);
  12. }else{
  13. clearOverlays();
  14. mymarkers=[]
  15. }
  16. }
  17. }
  18.  
  19. $(document).ready(function() {
  20. $("#map").css({
  21. height: 500,
  22. width: 600
  23. });
  24. var myLatLng = new google.maps.LatLng(43.653823, -79.382843);
  25. MYMAP.init('#map', myLatLng, 11);
  26.  
  27. $("#showmarkers").click(function(e){
  28. MYMAP.placeMarkers('include/xml.php');
  29. });
  30. });
  31.  
  32. var MYMAP = {
  33. map: null,
  34. bounds: null
  35. }
  36.  
  37. MYMAP.init = function(selector, latLng, zoom) {
  38. var myOptions = {
  39. zoom:zoom,
  40. center: latLng,
  41. mapTypeId: google.maps.MapTypeId.ROADMAP
  42. }
  43. this.map = new google.maps.Map($(selector)[0], myOptions);
  44. this.bounds = new google.maps.LatLngBounds();
  45. }
  46.  
  47. var markerfilter = new Array();
  48. MYMAP.placeMarkers = function(filename) {
  49. $.get(filename, function(xml){
  50. $(xml).find("marker").each(function(){
  51. var name = $(this).find('name').text();
  52. var address = $(this).find('address').text();
  53. var address2 = $(this).find('address2').text();
  54. var Meeting_Type = $(this).find('Meeting_Type').text();
  55. var Time_of_Meeting = $(this).find('Time_of_Meeting').text();
  56. var Day_of_Meeting = $(this).find('Day_of_Meeting').text();
  57. var Open_Meeting = $(this).find('Open_Meeting').text();
  58. var Wheelchair = $(this).find('Wheelchair').text();
  59. var ASL = $(this).find('ASL').text();
  60. var Comments = $(this).find('Comments').text();
  61. markerfilter.push(marker);
  62.  
  63. var MeetingType = document.getElementById("Meeting_Type");
  64. var type = MeetingType.options[MeetingType.selectedIndex].text;
  65. var DayofMeeting = document.getElementById("Day_of_Meeting");
  66. var day = DayofMeeting.options[DayofMeeting.selectedIndex].text;
  67. var TimeofMeeting = document.getElementById("Time_of_Meeting");
  68. var time = TimeofMeeting.options[TimeofMeeting.selectedIndex].text;
  69.  
  70. // create a new LatLng point for the marker
  71. var lat = $(this).find('lat').text();
  72. var lng = $(this).find('lng').text();
  73. var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
  74.  
  75. // extend the bounds to include the new point
  76. MYMAP.bounds.extend(point);
  77.  
  78. var marker = new google.maps.Marker({
  79. position: point,
  80. map: MYMAP.map
  81. });
  82.  
  83. var infoWindow = new google.maps.InfoWindow();
  84. var html='<b><u>'+name+'</b></u><br />'+address2+'<br />'+address+'<br />'+Meeting_Type+',&nbsp'+Time_of_Meeting+',&nbsp'+Day_of_Meeting+'<br />Open Meeting:&nbsp'+Open_Meeting+'<br />Wheelchair Accessible:&nbsp'+Wheelchair+'<br />ASL:&nbsp'+ASL+'<br />Comments:&nbsp'+Comments;
  85. google.maps.event.addListener(marker, 'click', function() {
  86. infoWindow.setContent(html);
  87. infoWindow.open(MYMAP.map, marker);
  88. });
  89. MYMAP.map.fitBounds(MYMAP.bounds);
  90. });
  91. });
  92. }
Add Comment
Please, Sign In to add comment