JAVASCRIPT   103

google_map_api.js

Guest on 21st September 2021 02:25:14 PM

  1. // google_map_api.js
  2.  
  3. // Display Info Windows Above Markers
  4.  
  5. "use strict";
  6.  
  7. (function()
  8. {
  9.         // http://austinmatzko.com/2008/04/14/addevent-preserving-this/
  10.         var addEvent = function( obj, type, fn ) {
  11.                 if (obj.addEventListener)
  12.                         obj.addEventListener(type, fn, false);
  13.                 else if (obj.attachEvent)
  14.                         obj.attachEvent('on' + type, function() { return fn.apply(obj, new Array(window.event));});
  15.         };
  16.        
  17.         addEvent(window, 'load', display_map);
  18. })();
  19.  
  20. function display_map() {
  21.     var is_both = (location.search == '?map_type=both') ? 1 : 0;
  22.  
  23.     // Use longitude so map is continent-aligned on start
  24.     var myLatlng = new google.maps.LatLng(15, 11);
  25.  
  26.     var myOptions = {
  27.       zoom: 2,
  28.       center: myLatlng,
  29.       streetViewControl: false,
  30.       mapTypeId: google.maps.MapTypeId.ROADMAP
  31.     };
  32.  
  33.     var map = new google.maps.Map(document.getElementById("map"), myOptions);
  34.  
  35.     // image is 12x20
  36.     var marker_img_p = new google.maps.MarkerImage('/main/img/mm_20_p.png');
  37.     var marker_img_f = new google.maps.MarkerImage('/main/img/mm_20_f.png');
  38.     // offset -9
  39.     var marker_img_f_offset = new google.maps.MarkerImage('/main/img/mm_20_f.png',
  40.         null, null, new google.maps.Point(-3,20), null);
  41.  
  42.     // http://stackoverflow.com/questions/7842730/change-marker-size-in-google-maps-v3
  43.     // shadow image size is 22x20
  44.     var marker_shadow = new google.maps.MarkerImage('/main/img/mm_20_shadow.png',
  45.         null, null, new google.maps.Point(7,20), null);
  46.     // offset -9
  47.     var marker_shadow_offset = new google.maps.MarkerImage('/main/img/mm_20_shadow.png',
  48.         null, null, new google.maps.Point(-2,20), null);
  49.  
  50.     // offset of info box from marker
  51.     var info_offset = new google.maps.Size(10, -15);
  52.  
  53.     // Creates a marker whose info window displays the given location string
  54.     function createMarker(map_pins, lat, lng, locstr) {
  55.       // create point
  56.       var latlng = new google.maps.LatLng(lat, lng)
  57.  
  58.       // create marker
  59.       var marker = new google.maps.Marker({
  60.         position: latlng,
  61.         map: map,
  62.         // in 'both' mode, display family pins offset and below
  63.         icon: (map_pins == momjian_us_pg_geo_locations ? marker_img_p :
  64.                !is_both ? marker_img_f : marker_img_f_offset),
  65.         shadow: (map_pins == momjian_us_pg_geo_locations || !is_both) ? marker_shadow : marker_shadow_offset,
  66.         zIndex: map_pins == momjian_us_pg_geo_locations ? 2 : 1
  67.       });
  68.  
  69.       // create info box
  70.       var infowindow = new InfoBox({
  71.         content: locstr,
  72.         disableAutoPan: true,
  73.         closeBoxURL: '',
  74.         enableEventPropagation: true, // used for map labels
  75.         pixelOffset: info_offset
  76.       });
  77.  
  78.       // Show this marker's description when the mouse is over it
  79.       google.maps.event.addListener(marker, 'mouseover', function() {
  80.         infowindow.open(map, marker);
  81.       });
  82.       google.maps.event.addListener(marker, 'mouseout', function() {
  83.         infowindow.close(map, marker);
  84.       });
  85.     }
  86.  
  87.     // Add map pins
  88.     function addMapPins(map_pins, description) {
  89.         for (var loc = 0; loc < map_pins.length; loc++)
  90.         {
  91.             var years = map_pins[loc][2];
  92.  
  93.             if (/\),/.test(years))
  94.                         years = years.replace(/\), */g, '),<br />');
  95.             years = '<div style="text-align: center">' + years + '</div>';
  96.  
  97.             createMarker(map_pins,
  98.                          map_pins[loc][3],
  99.                          map_pins[loc][4],
  100.                          map_pins[loc][1] +
  101.                          ((map_pins[loc][1] != '') ? ', ' : '') +
  102.                          map_pins[loc][0] + '<br />' +
  103.                                 (is_both ? description + "<br />" : "") +
  104.                          years);
  105.         }
  106.     }
  107.  
  108.     if (is_both || location.search == '?map_type=postgres' ||
  109.         location.search == '?' || location.search == '')
  110.     {
  111.         if (!is_both)
  112.         {
  113.                 document.getElementById('postgres_span').className = 'bold';
  114.                 document.getElementById('postgres').checked = true;
  115.                 document.getElementById('map_details').innerHTML =
  116. 'The <a class="major"href="/main/events.html">Events</a> section has a ' +
  117. 'cronological list my Postgres trips, and <a class="major" ' +
  118. 'href="/main/presentations/index.html">Presentations</a> outlines all my ' +
  119. 'presentations at these locations.  There is also a ' +
  120. '<a href="/main/img.html?pgtravel.png">chart</a> ' +
  121. 'of my Postgres travel per year.';
  122.  
  123.         }
  124.         addMapPins(momjian_us_pg_geo_locations, "Postgres");
  125.     }
  126.  
  127.     if (is_both || location.search == '?map_type=family')
  128.     {
  129.         if (!is_both)
  130.         {
  131.                 document.getElementById('family_span').className = 'bold';
  132.                 document.getElementById('family').checked = true;
  133.                 document.getElementById('map_details').innerHTML = '<div class="center italic">Travel Since 1989</div>';
  134.         }
  135.  
  136.         addMapPins(momjian_us_fam_geo_locations, "Family");
  137.     }
  138.  
  139.     if (is_both)
  140.     {
  141.         document.getElementById('both_span').className = 'bold';
  142.         document.getElementById('both').checked = true;
  143.     }
  144. }

Raw Paste


Login or Register to edit or fork this paste. It's free.