Skip to content

Instantly share code, notes, and snippets.

@fabrinal

fabrinal/sample_marker_refactor.html

Created October 6, 2015 00:41
Show Gist options
  • Save fabrinal/f6e70fd12ec50a8a68fb to your computer and use it in GitHub Desktop.
Save fabrinal/f6e70fd12ec50a8a68fb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment