Googleマップapiのピンに近いカスタムテキスト？私のグーグルマップの

Question

コード：

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

これは、マップがどのように見えるかである、と私は矢印の上にテキストをいくつかのラベルを掲示したいですか？ピンの周りに何か他のものがありますか？

Answer 1

あなたはGoogle Maps Embed APIでそれを行うことはできません。しかし、以下に示すように、Google Maps JavaScript APIを使用してカスタムツールチップウインドウを配置することができます。

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