Setzen Sie Google map location UND loswerden Box

Question

Ich versuche, zwei Probleme zu lösen. Ich kann jeden einzeln lösen, aber nicht gleichzeitig.

Ich möchte 1. Um eine Google-Karte auf meiner Seite haben, die einen bestimmten Ort hat bereits geladen, wenn die Seite geladen wird, auch bekannt als der rote Pfeil Sache ist es 2. Um von der grauen Box in der linken oberen loszuwerden Handecke

Die Lokalisierung ist einfach. Sie verwenden nur einen iframe. Ich habe es wie folgt aus:

<div style="border-radius: 250px; width: 500px; overflow: hidden; margin-top: 90px; margin-bottom: 90px;"> 
    <iframe id="map" width="500" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=MYAPIKEY" allowfullscreen></iframe> 
</div> 

Aber die iframe kommt mit einem kleinen Kasten in der oberen linken Ecke. Ich will das nicht und ich muss es weggehen.

Also habe ich versucht mit der Google Maps API. Mit JavaScript, ich bin die Box wie so entfernen können:

<div id="map_container" > 
    <div id="map"></div> 
</div> 

<script> 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: {lat: -33, lng: 151}, 
     disableDefaultUI: true 
    }); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap"> 
</script> 

Das funktioniert gut, außer ich nicht den gleichen roten Pfeil Satz zu haben scheinen. Dies ist eine Website für ein Unternehmen, so kann ich nicht nur die lat und lng setzen. Ich brauche den roten Pfeil direkt über dem Geschäft. Ich kann nicht die Antwort auf diese beiden Fragen zu Stack Overflow finden. Hilfe!

Answer 1

Wenn Sie die Javascript-API verwenden möchten, müssen Sie zuerst die Koordinaten der Orts-ID Ihres Unternehmens mit der Places-API nachschlagen und diese dann in die Karte übernehmen.

Schauen Sie sich das Beispiel auf halbem Weg die Seite hier https://developers.google.com/places/place-id

Allerdings, wenn alles, was Sie tun möchten, die Info-Box verstecken, können Sie einbetten in der ‚Ansicht‘ Modus verwenden:

<iframe src="https://www.google.com/maps/embed/v1/view?key=[your key]&q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw" /> 

das verschiedene Modi einbetten in dem docs https://developers.google.com/maps/documentation/embed/guide

Answer 2

beschrieben Soweit ich das beurteilen kann, kann man nicht auf den roten Pfeil hält und von der grauen Box zur gleichen Zeit loszuwerden. ABER du kannst es mit CSS machen. In meinem Fall möchte ich, dass meine Karte ein Kreis ist. Also lege ich die Karte in einen Kreiscontainer mit dem Überlauf: versteckt auf dem Container. Dann habe ich die Breite und Höhe des Iframes um 170% erhöht, wodurch die Box nicht mehr sichtbar ist. Dann ist es nur eine Frage der relativen Positionierung, um den Pfeil zurück in die Mitte der Karte zu drücken. Hier ist, wie ich es gemacht habe.

<div id="map_container"> 
    <iframe id="map" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=[MYAPIKEY]" allowfullscreen> 
    </iframe> 
</div> 


#map { 
width: 170%; 
height: 170%; 
position:relative; 
top: -120px; 
left: -120px; 
} 
#map_container { 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
width: 350px; 
height: 350px; 
overflow: hidden; 
margin-top: 90px; 
margin-bottom: 90px; 
border-radius: 250px; 
} 

Das Webkit-Bit soll verhindern, dass die Karte in voller Größe an den Rändern flackert. Sie müssen natürlich noch einen gültigen API-Schlüssel einstecken, damit dies funktioniert.