Benutzerdefinierter Text näher an Google Maps api?

Question

-Code für mein google map:

<div class="contact-map fullwidth"> 
 
    <iframe id="contacts-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2934.840706379279!2d23.333396514681272!3d42.643536825146064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa84104363e1bf%3A0x52c1ac43c6be263a!2z0YPQuy4g4oCe0J_RitGB0YLRitGAINGB0LLRj9GC4oCcIDExLCAxNzAwINC60LIuINCS0LjRgtC-0YjQsCwg0KHQvtGE0LjRjw!5e0!3m2!1sbg!2sbg!4v1502701860622" frameborder="0" allowfullscreen></iframe> 
 
</div>

Dies ist, wie Karte sieht, und ich möchte einige Etikett mit Text über den Pfeil schreiben? Oder etwas anderes um den Stift herum?

Answer 1

Sie können es nicht mit Google Maps Embed API. Aber Sie können benutzerdefinierte Tooltip-Fenster mit Google Maps JavaScript API wie unten gezeigt platzieren.

<div id="container"> 
 
    <style> 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    
 
    body, 
 
    html, 
 
    #container { 
 
     height: 100%; 
 
    } 
 
    </style> 
 

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

 
    <script> 
 
    function initMap() { 
 

 
     //Location 
 
     var address = { 
 
     lat: 40.730, 
 
     lng: -73.935 
 
     }; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 18, 
 
     center: address 
 
     }); 
 

 
     //Your custom label content 
 
     var contentString = 
 
     '<div>' + 
 
     ' <h1>Title</h1>' + 
 
     ' <p>This is your custom description and you can type anything here.</p>' + 
 
     '</div>'; 
 

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

 
     var marker = new google.maps.Marker({ 
 
     position: address, 
 
     map: map, 
 
     title: 'My Place' 
 
     }); 
 

 
     marker.addListener('click', function() { 
 
     infowindow.open(map, marker); 
 
     }); 
 

 
     //Open overlay by default 
 
     infowindow.open(map, marker); 
 

 
    } 
 
    </script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
</div>

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.