Google Maps Api Marker With Label

I have var marker = new MarkerWithLabel({ position: uav.Position, icon: mapStyles.uavSymbolBlack, labelContent: uav.Callsign + '

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

functioninitialize() {
    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 = newMarkerWithLabel({
        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;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><scriptsrc="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script><divid="map_canvas"style="width:750px; height:450px; border: 2px solid #3872ac;"></div>