<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

<div id="map"></div>

<a href="https://ianchuu.com/2017/12/11/Google%20Map%20marker%20cluster%20%E6%A8%99%E8%A8%98%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8/" target"_blank">more guide info</a>
#map {
  width:100%;
  height:300px;
}
var locations = [
  {name:'taipei101',price:'350NT',lat:25.0339031,lng:121.5623212},
  {name:'airport',price:'150NT',lat:25.063236,lng:121.5503405},
  {name:'train station',price:'160NT',lat:25.0455016,lng:121.5186618},
  {name:'MRT station',price:'100NT',lat:25.0625538,lng:121.5171593}, 
];
var image = {
   url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   size: new google.maps.Size(20, 32),
   origin: new google.maps.Point(0, 0),
   anchor: new google.maps.Point(0, 32)
};
function initialize() {
  var markerCenter = new google.maps.LatLng(25.0625938,121.5308613);
  var mapOptions = {
    zoom: 14,
    center: markerCenter,
    disableDefaultUI: true
  };
  map = new google.maps.Map(document.getElementById('map'),
          mapOptions);
  marker = new google.maps.Marker({
    map:map,
    animation: google.maps.Animation.DROP,
		position: markerCenter
  });
    for (var i = 0; i < locations.length; i++) {
          var item = locations[i];
          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
            position: {lat: item.lat, lng: item.lng},
            map: map,
            title: item.name,
            icon:image,
            data:'Go to '+item.name + '<br/> Taxi price: ' +item.price
          });
        marker.addListener('click', function() {
          infowindow.setContent( this.data );
          infowindow.open(map, this);
        });
     }
}

google.maps.event.addDomListener(window, 'load', initialize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.