如何在Google Map api上显示带有方向的标签

问题描述 投票:-2回答:1

我想显示一个带有方向图标的标签,该标签与图片中所示的相似(从默认的嵌入式iframe捕获。)>

以下是我当前的代码。

    google.maps.event.addDomListener(window, 'load', init);
    var lat = 25.2091043;
    var lng = 55.2725799;
    function init() {
        var mapOptions1 = {
            zoom: 18,
            center: new google.maps.LatLng(lat, lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP               
        };
        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 class="title text-center" id="firstHeading" class="firstHeading">Your Header</h2>'+
        '<div class="text-center" id="bodyContent">'+
            '<p>Suite <b>4701-01, Aspin Commercial Tower, Sheikh Zayed Road, Dubai, United Arab Emirates</b></p>' +
            '<a href="https://maps.google.com/maps?ll=25.208963,55.272498&z=19&t=m&hl=en&gl=LK&mapclient=embed&daddr=Aspin%20Commercial%20Tower%20106%20Sheikh%20Zayed%20Rd%20Dubai%20United%20Arab%[email protected],55.2724984" target="_blank">Get directions</a>'
        '</div>'+
        '</div>';

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

        // Get all html elements for map
        var mapElement1 = document.getElementById('map-canvas');
        var map1 = new google.maps.Map(mapElement1, mapOptions1);
        var marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map1,
            animation: google.maps.Animation.DROP,
        });
        infowindow.open(map1, marker);
    }

任何帮助将不胜感激!

Expected result

Current result

我想显示一个带有方向图标的标签,该标签与图片中所示的相似(从默认的嵌入式iframe捕获)。以下是我当前的代码。 google.maps.event ....

javascript google-maps-api-3 label google-maps-markers
1个回答
0
投票

一种选择是将<div>创建为custom control,并通过将用户发送到Google Maps创建“查看更大的地图”和“方向”的链接。

© www.soinside.com 2019 - 2024. All rights reserved.