Info Fenster mit Richtung und Sterne Bewertung in Google Karte

Question

Ich versuche, InfoWindows zu Marker hinzuzufügen, und Marker sollte auf der linken Seite der Karte sein. Ich möchte google map wie dieses Bild für google map

Aktueller Code anhängen:

<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

Das Bild, das Sie von der Embed API angebracht ist, nicht die JavaScript-API. Wenn Sie nur einen Marker und das Infowindow wie im abgebildeten Bild benötigen, funktioniert die Embed-API möglicherweise besser für Sie. Bitte beachten Sie unsere Dokumentation hier:

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

Der Code müßten Sie die Einbettungs Karte bekommen genau wie das Bild, das Sie geschrieben wäre:

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

ANMERKUNG: Ich habe meinen API-Schlüssel unkenntlich gemacht für Sicherheit. Wenn Sie Ihren eigenen Code eingeben, erhalten Sie eine Karte, die wie Ihr Bild aussieht.

Wenn Sie stattdessen die JavaScript-API verwenden möchten, müssen Sie Code hinzufügen, um den gesamten gewünschten Inhalt in das InfoWindow zu stellen. Die Embed-API kann jedoch automatisch den Ortsnamen, die Adresse, die Bewertungen, die Wegbeschreibung usw. eingeben.

Ich hoffe, das hilft!