Google Maps API маркер с меткой

Question

У меня есть

var marker = new MarkerWithLabel({ 
      position: uav.Position, 
      icon: mapStyles.uavSymbolBlack, 
      labelContent: uav.Callsign + 
       '<div style="text-align: center;"><b>Alt: </b>' + uav.Alt + 
       '<br/><b>Bat: </b>' + 
       uav.Battery + '</div>', 
      labelAnchor: new google.maps.Point(95, 20), 
      labelClass: "labels", 
      labelStyle: { opacity: 0.75 }, 
      zIndex: 999999,}) 

Этот маркер в моем файле JavaScript, но ява консоли продолжают давать мне ошибку.

Uncaught ReferenceError: MarkerWithLabel is not defined 

Я думал, что MarkerWithLabel является встроенным в Google Maps api. Но он не работает.

Answer 1

MarkerWithLabel не является частью Google Maps Javascript API v3, это находится в сторонней библиотеке MarkerWithLabel.

Одним из признаков является то, что если бы это была часть API, это было бы google.maps.MarkerWithLabel.

- documentation

- examples

fiddle

фрагмент кода:

var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new MarkerWithLabel({ 
 
     position: map.getCenter(), 
 
     // icon: mapStyles.uavSymbolBlack, 
 
     labelContent: "uav.Callsign" + '<div style="text-align: center;"><b>Alt: </b>' + "uav.Alt" + '<br/><b>Bat: </b>' + "uav.Battery" + '</div>', 
 
     labelAnchor: new google.maps.Point(95, 20), 
 
     labelClass: "labels", 
 
     labelStyle: { 
 
      opacity: 0.75 
 
     }, 
 
     zIndex: 999999, 
 
     map: map 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
.labels { 
 
    background-color: white; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>