Custom Markers

by pphheerroonn

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRuCzboe7HpEYoCxniXPcGF1OcMGmoJM0&callback=initMap">
</script>

<div>
Hello
</div>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
function initMap() {
  map = new google.maps.Map(
      document.getElementById('map'),
      {center: new google.maps.LatLng(53, -7.5), zoom: 6.5});

  var iconBase =
      'https://www.compub.com/media/wysiwyg/Basics/';
      

  var icons = {

    biconic: {
      icon: iconBase + 'BICONIC.png'
    },
    library: {
      icon: iconBase + 'library_maps.png'
    },
    info: {
      icon: iconBase + 'info-i_maps.png'
    }
  };

  var features = [
    {
      position: new google.maps.LatLng(53.286196, -9.034168),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(53.343643, -6.259555),
      type: 'biconic'
    }, {//Limerick
      position: new google.maps.LatLng(52.663090, -8.627900),
      type: 'biconic'
    }, {//Cork
      position: new google.maps.LatLng(51.898995, -8.472568),
      type: 'biconic'
    }, {//Swords
      position: new google.maps.LatLng(53.453756, -6.218991),
      type: 'biconic'
    }, {//Dundrum
      position: new google.maps.LatLng(53.287122, -6.241847),
      type: 'biconic'
    }, {//HQ
      position: new google.maps.LatLng(-33.91784, 151.23094),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.91682, 151.23149),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.91790, 151.23463),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.91666, 151.23468),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.916988, 151.233640),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
      type: 'biconic'
    }, {
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
      type: 'biconic'
    }, {
      position: new...