如何使用Google Maps API v3突出顯示地址？

Question

我使用Google Maps API v3在地圖上顯示一些位置。基本上它的工作原理如下：有一個管理區域可以向數據庫添加新的位置。當添加新位置時，我使用Geocoder服務檢查LatLng值並將地址+ LatLng保存到數據庫。之後，我只需通過LatLng值顯示地圖+標記。這工作得很好。

var myLatlng = new google.maps.LatLng(52.494406, 13.429538); 

var mapOptions = { 
    zoom: 15, 
    center: myLatlng 
} 

var map = new google.maps.Map(document.getElementById('gmap'), mapOptions); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map 
}); 

我在這裏錯過的是突出顯示的地址，如下面的截圖所示。

Answer 1

你可以使用MarkerWithLabel，Documentation here.

function initialize() { 
 

 
    var myLatlng = new google.maps.LatLng(-34.668520, -58.543857); 
 
    var mapOptions = { 
 
    zoom: 14, 
 
    center: myLatlng 
 
    } 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var marker_labeled = new MarkerWithLabel({ 
 
    position: myLatlng, 
 
    draggable: true, 
 
    raiseOnDrag: true, 
 
    map: map, 
 
    labelContent: "OneWay's Home", 
 
    labelAnchor: new google.maps.Point(-20, 10), 
 
    labelClass: "markerLabel", // the CSS class for the label 
 
    labelStyle: { 
 
     opacity: 0.75 
 
    } 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
.markerLabel { 
 
    color: black; 
 
    font-weight: bold; 
 
    text-shadow: 0px 0px 5px rgba(255, 0, 0, 1); 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script> 
 

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