Place Searches

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
<script>
function initMap(){
      // map options
      var options = {
        zoom:7,
        center:{lat:53.3938131, lng:-7.858913}
        }
var map = new google.maps.Map(document.getElementById('map'),options);
      // Add a marker clusterer to manage the markers.

      //Add marker
      var markers = [

        //Dublin
        {
          coords:{lat:53.338741, lng:-6.261563},
          iconImage:'assets/img/places/stparkdublin.png',
          content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
        },
        {
          coords:{lat:53.3755012,lng:-6.2735677},
          iconImage:'assets/img/places/botanic garden.png',
          content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
        },
        {
          coords:{lat:53.355998576, lng:-6.32166538},
          iconImage:'assets/img/places/stparkdublin.png',////////////////////add picture
          content:'<h1>Phoenix Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://phoenixpark.ie/</a>'
        },
        {
          coords:{lat:53.460259, lng:-6.219985},
          iconImage:'assets/img/places/swordscastle.png',
          content:'<h1>Swords Castle</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://swordscastle.events/</a>'
        },
        {
          coords:{lat:53.37923, lng:-6.07201},
          iconImage:'assets/img/places/Howth.png',
          content:'<h1>Howth</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.visithowth.ie/</a>'
        },
        {
          coords:{lat:55.1364, lng:-7.456},
          iconImage:'assets/img/places/buncrana1.png',
          content:'<h1>Buncrana</h1>'+ '<br>' +...

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;
}