Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function initMap() {
- var infoWindow = new google.maps.InfoWindow();
- var map = new google.maps.Map(document.getElementById('map'), {
- zoom: 12,
- mapTypeId:google.maps.MapTypeId.HYBRID,
- scrollwheel: true,
- center: { lat: 41.876, lng: -87.624 }
- });
- var georssLayer = new google.maps.KmlLayer({
- url: 'datamap.kml'
- });
- georssLayer.setMap(map);
- function addMarker(feature, i, info) {
- var marker = new google.maps.Marker({
- position: feature.position,
- label: {text: feature.title, color: "yellow"},
- animation:google.maps.Animation.BOUNCE,
- map: map
- });
- google.maps.event.addListener(marker, 'click', (function(marker, i) {
- return function() {
- infoWindow.setPosition(feature.position);
- infoWindow.setContent(info[i]);
- infoWindow.open(map, marker);
- }
- })(marker, i));
- //console.log(info[i]);
- }
- /*
- function addOption(feature, i) {
- var name = 'marker ' + i;
- var option = '<option value="'+ i +'">' + name + '</option>';
- document.getElementById('dropdown').innerHTML += option;
- }
- */
- function addOption(feature, i) {
- var option = '<option value="'+ i +'">' + feature.title + '</option>';
- document.getElementById('dropdown').innerHTML += option;
- }
- function selectOpion(selectElm) {
- var i = Number(selectElm.value);
- map.setCenter(features[i].position);
- map.setZoom(9);
- }
- google.maps.event.addDomListener(document.getElementById('dropdown'), 'change', function(e) {
- selectOpion(this);
- });
- var features = [
- {position: new google.maps.LatLng(1.5252265, 101.7205939), title: 'Place Name 0'},
- {position: new google.maps.LatLng(-0.4938175, 101.47658145000001), title: 'Place Name 1'},
- {position: new google.maps.LatLng(0.32034099999999993, 101.06136349999998), title: 'Place Name 2'},
- {position: new google.maps.LatLng(1.68450545, 101.4448306), title: 'Place Name 3'},
- {position: new google.maps.LatLng(0.5137912, 101.441176), title: 'Place Name 4'},
- {position: new google.maps.LatLng(-0.49255899999999997, 102.24846645), title: 'Place Name 5'},
- {position: new google.maps.LatLng(-0.293274, 103.18415300000001), title: 'Place Name 6'},
- {position: new google.maps.LatLng(0.16251709999999997, 102.43564895), title: 'Place Name 7'},
- {position: new google.maps.LatLng(2.0708884499999995, 100.80535549999999), title: 'Place Name 8'},
- {position: new google.maps.LatLng(0.8932599499999999, 100.49054645), title: 'Place Name 9'},
- {position: new google.maps.LatLng(0.828033, 101.90484455), title: 'Place Name 10'}
- ];
- var infoWindowContent = [];
- for (var i = 0, feature; feature = features[i]; i++) {
- infoWindowContent.push('<div class=info_content><h2>'+feature.title+'</h2><p>Di Sini Info Tentang '+feature.title+'</p></div>');
- };
- for (var i = 0, feature; feature = features[i]; i++) {
- addMarker(feature, i, infoWindowContent);
- addOption(feature, i);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement