带有标签的谷歌地图api标记

Question

I have

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

This marker in my JavaScript file, but java console keep giving me an error.

Uncaught ReferenceError: MarkerWithLabel is not defined

I thought MarkerWithLabel is the built-in of the google maps api. But it doens't work.

Answer 1

MarkerWithLabel is not part of the Google Maps Javascript API v3 , it is in a third party library MarkerWithLabel .

New location (GitHub): https://github.com/googlemaps/js-markerwithlabel

One indication is that if it was part of the API it would be google.maps.MarkerWithLabel.

(see the GitHub page for examples and documentation)

fiddle

code snippet:

 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script> <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>