Info Window with direction and star rating in google map

Question

I'm trying to add infoWindow's to marker, and marker should be on left side of map. I want google map like this attach image

Current code for google map:

<script>
      function initMap() {
        var uluru = {lat:<?= $location['lat'];?>,  lng: <?= $location['lng'];?>};
        var map = new google.maps.Map(document.getElementById('gmap_canvas'), {
          zoom: 14,
          center: uluru
        });

        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h4 id="firstHeading" class="firstHeading">Venue</h4>'+
            '<div id="bodyContent">'+
            '<p><a><?= $location['address'];?></a></p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>

Answer 1

The image you attached is from the Embed API, not the JavaScript API. If you only need one marker and the infowindow like in the image shown, then the embed API may work better for you. Please see our documentation here:

https://developers.google.com/maps/documentation/embed/guide

The code you would need to get the embed map exactly like the image you posted would be:

<iframe

  width="600"

  height="450"

  frameborder="0" style="border:0"

  src="https://www.google.com/maps/embed/v1/place?key=MY_API_KEY
&q=Hotel+Sahara+star" allowfullscreen>
</iframe>

NOTE: I have redacted my API key for security. If you input your own into this code, you will get a map that looks like your image.

If you wish to use the javaScript API instead, you will need to add code to put all of the desired content in the infoWindow. The embed API, however, can automatically put the place name, address, ratings, directions, etc.

I hope this helps!