如何使用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.

＆＃13;

＆＃13;

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

＆＃13;

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); 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;