Fenêtre d'information avec direction et nombre d'étoiles dans google map

Question

J'essaie d'ajouter infoWindow au marqueur, et le marqueur devrait être sur le côté gauche de la carte. Je veux carte google comme celui-ci attache l'image

code actuel pour carte google:

<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

L'image que vous trouverez ci-joint de l'API Intégrer, pas l'API JavaScript. Si vous n'avez besoin que d'un marqueur et de l'infowindow comme dans l'image affichée, l'API intégrée peut mieux fonctionner pour vous. S'il vous plaît voir notre documentation ici:

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

Le code que vous devrez obtenir la carte embed exactement comme l'image que vous avez affichée serait:

<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: J'expurgée ma clé API pour Sécurité. Si vous entrez le vôtre dans ce code, vous obtiendrez une carte qui ressemble à votre image.

Si vous souhaitez utiliser l'API javaScript à la place, vous devrez ajouter du code pour placer tout le contenu souhaité dans infoWindow. L'API d'intégration, cependant, peut mettre automatiquement le nom de lieu, l'adresse, les notes, les directions, etc.

J'espère que cela aide!