Advertisement
justhrun

datamap2.js

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