title: How to add OnClick listener to the markers so that they display divs when clicked
body: <p>I would like the user to click on the marker on the map and when they click the marker they get back information of that place in a div on the same page .I'm new to JavaScript so I'm finding it hard where to put click event in the code .                             </p>
  
  <p>This is script.js class</p>
  
  <pre><code> var map,service ;
      $(document).ready(function () {
          geoLocationInit();
          var myLatLng= new google.maps.LatLng(-33.8665433,151.1956316);
  
  
  
          function  geoLocationInit(){
  
              if(navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(success, fail);
              }else{
                  alert("Browser not supported");
              }
          }
          function  success(position) {
              console.log(position);
              var latval=position.coords.latitude;
              var Ingval=position.coords.longitude;
  
              myLatLng = new google.maps.LatLng(latval,Ingval);
              createMap(myLatLng);
  
          }
          function fail(){
              alert("it fails");
          }
  
  
  
          function createMap(myLatLng,type){
              map = new google.maps.Map(document.getElementById('map'), {
                  center: myLatLng,
                  scrollwheel: false,
                  zoom: 12
              });
  
              var marker= new google.maps.Marker({
                  position: myLatLng,
                  map: map
              })
  
              function createMarker(latlng,icn,name){
  
              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
                  icon:icn,
                  title: name
              });
          }
  
          var request = {
              location: myLatLng,
              radius: '2500',
              types: ['cafe']
          };
  
  
  
          service = new google.maps.places.PlacesService(map);
          service.nearbySearch(request, callback);
  
  
  
              function callback(results,status) {
  
              if (status == google.maps.places.PlacesServiceStatus.OK) {
                  for (var i = 0; i &lt; results.length; i++) {
                      var place = results[i];
                      console.log(place);
                      latlng= place.geometry.location;
                      name= place.name;
                      icn ='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  
                      createMarker(latlng,icn,name);
  
  
                      service.getDetails({placeId: place.place_id}, function(place, status) {
                          if (status == google.maps.places.PlacesServiceStatus.OK) {
                              let reviewEl = document.querySelector('.reviews');
                              for (let review of place.reviews){
                                  let li = document.createElement('li');
                                  li.innerHTML = `&lt;div&gt;Name of Place: ${name}&lt;/div&gt;
                                 &lt;div&gt;Author: ${review.author_name}&lt;/div&gt;
                                 &lt;em&gt;${review.text}&lt;/em&gt;
                                 &lt;div&gt;Rating: ${review.rating} star(s)&lt;/div&gt;`;
  
                                  reviewEl.appendChild(li);
  
  
  
                              }
                          }})
  
  
                  }
  
  
  
              }}}});
  
  
  * {
                                                box-sizing: border-box;
                                            }
  </code></pre>
  
  <p>This main.css class</p>
  
  <pre><code>#map {
          width: 500px;
          height: 400px;
      }
  
      .reviews {
          padding:0;
          list-style:none;
      }
  
      .reviews li+li {
          margin-top: 1em;
          padding-top: 1em;
          border-top: 1px solid black;
      }
      .reviews em{display:block;margin:0.3em 0;}
  </code></pre>