fabrinal/sample_marker_refactor.html

## sample_marker_refactor.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

      var map;

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -1.246414, lng: 116.850146},
          zoom: 12
          });

         var regionData = [
          {
            name: "Something in Balikpapan",
            lat:  -1.278507,
            lng: 116.820792,
            desc: "Hello, welcome to Balikpapan"
          },
          {
            name: "Near the center",
            lat: -1.234572,
            lng: 116.845339,
            desc: "So close to the center",
            customIcon: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

          },
          {
            name: "Another place in Balikpapan",
            lat:   -1.246071,
            lng: 116.862162,
            desc: "Hi, I'm still in Balikpapan"
          }
        ];

      function generateMapMarker(){
        regionData.forEach(function(region) {
           var regionContent = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">' + region.name + '</h1>' +
            '<div id="bodyContent">'+
            '<p>'+ 'description: '+ region.desc +  '</p>\n' +
            '</div>'+
            '</div>';
          var regionWindow = new google.maps.InfoWindow({
            content: regionContent

          });
        var marker = new google.maps.Marker({
         position: {lat: region.lat,lng: region.lng},
         map: map,
         icon: {
          path: region.customIcon,
          scale: 4
         },
         label: "B"
        });
         marker.addListener('click', function() {
          regionWindow.open(map, marker);
        });


        });
      }

      generateMapMarker();
    }
      </script>
     <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
     </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	html, body { height: 100%; margin: 0; padding: 0; }
	#map { height: 100%; }
	</style>

	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">

	var map;

	function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: -1.246414, lng: 116.850146},
	zoom: 12
	});

	var regionData = [
	{
	name: "Something in Balikpapan",
	lat: -1.278507,
	lng: 116.820792,
	desc: "Hello, welcome to Balikpapan"
	},
	{
	name: "Near the center",
	lat: -1.234572,
	lng: 116.845339,
	desc: "So close to the center",
	customIcon: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

	},
	{
	name: "Another place in Balikpapan",
	lat: -1.246071,
	lng: 116.862162,
	desc: "Hi, I'm still in Balikpapan"
	}
	];

	function generateMapMarker(){
	regionData.forEach(function(region) {
	var regionContent = '<div id="content">'+
	'<div id="siteNotice">'+
	'</div>'+
	'<h1 id="firstHeading" class="firstHeading">' + region.name + '</h1>' +
	'<div id="bodyContent">'+
	'<p>'+ 'description: '+ region.desc + '</p>\n' +
	'</div>'+
	'</div>';
	var regionWindow = new google.maps.InfoWindow({
	content: regionContent

	});
	var marker = new google.maps.Marker({
	position: {lat: region.lat,lng: region.lng},
	map: map,
	icon: {
	path: region.customIcon,
	scale: 4
	},
	label: "B"
	});
	marker.addListener('click', function() {
	regionWindow.open(map, marker);
	});


	});
	}

	generateMapMarker();
	}
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
	</script>
	</body>
	</html>