justhrun

datamap.js

Jun 28th, 2022 (edited)
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function initMap() {
  2.    var map = new google.maps.Map(document.getElementById('map'), {
  3.    zoom: 12,
  4.    mapTypeId:google.maps.MapTypeId.HYBRID,
  5.    scrollwheel: true,
  6.    center: { lat: 41.876, lng: -87.624 }
  7.  });
  8.  
  9.    var georssLayer = new google.maps.KmlLayer({
  10.         url: 'datamap.kml'
  11.    });
  12.    georssLayer.setMap(map);
  13.  
  14. function addMarker(feature) {
  15.     var marker = new google.maps.Marker({
  16.     position: feature.position,
  17.     label: {text: feature.title, color: "yellow"},
  18.     animation:google.maps.Animation.BOUNCE,
  19.     map: map
  20.     });
  21. }
  22.  
  23. function addOption(feature, i) {
  24.     var name = 'marker ' + i;
  25.     var option = '<option value="'+ i +'">' + name + '</option>';
  26.     document.getElementById('dropdown').innerHTML += option;
  27. }
  28.  
  29. function selectOpion(selectElm) {
  30.     var i = Number(selectElm.value);
  31.     map.setCenter(features[i].position);
  32.     map.setZoom(13);
  33.   }
  34.   google.maps.event.addDomListener(document.getElementById('dropdown'), 'change', function(e) {
  35.     selectOpion(this);
  36.   });
  37.   var features = [{
  38.     position: new google.maps.LatLng(1.5252265, 101.7205939),
  39.     title: 'Place Name 0',
  40.   }, {
  41.     position: new google.maps.LatLng(-0.4938175, 101.47658145000001),
  42.     title: 'Place Name 1',
  43.   }, {
  44.     position: new google.maps.LatLng(0.32034099999999993, 101.06136349999998),
  45.     title: 'Place Name 2',
  46.   }, {
  47.     position: new google.maps.LatLng(1.68450545, 101.4448306),
  48.     title: 'Place Name 3',
  49.   }, {
  50.     position: new google.maps.LatLng(0.5137912, 101.441176),
  51.     title: 'Place Name 4',
  52.   }, {
  53.     position: new google.maps.LatLng(-0.49255899999999997, 102.24846645),
  54.     title: 'Place Name 5',
  55.   }, {
  56.     position: new google.maps.LatLng(-0.293274, 103.18415300000001),
  57.     title: 'Place Name 6',
  58.   }, {
  59.     position: new google.maps.LatLng(0.16251709999999997, 102.43564895),
  60.     title: 'Place Name 7',
  61.   }, {
  62.     position: new google.maps.LatLng(2.0708884499999995, 100.80535549999999),
  63.     title: 'Place Name 8',
  64.   }, {
  65.     position: new google.maps.LatLng(0.8932599499999999, 100.49054645),
  66.     title: 'Place Name 9',
  67.   }, {
  68.     position: new google.maps.LatLng(0.828033, 101.90484455),
  69.     title: 'Place Name 10',
  70.   }];
  71.     for (var i = 0, feature; feature = features[i]; i++) {
  72.     addMarker(feature);
  73.     addOption(feature, i);
  74.     }
  75. }
Add Comment
Please, Sign In to add comment