google maps API polygon labels

Question

I am trying to put a label on a polygon drawn via the google maps api.

the result of my getPolygons.php ajax call looks like this:

var triangleCoords = [
    {lat:38.88154,lng: -77.02880},
    {lat:38.83863,lng:-77.02760},
    {lat:38.83917,lng:-77.07292},
    {lat:38.84251,lng: -77.12098},
    {lat:38.86951,lng:-77.13575},
    {lat:38.88769, lng:-77.05404}
];

code:

$.ajax({
    type:"GET",
    url:"getPolygons.php",
    dataType:"json",
    success:function(result){
            $.each(result,function(e,i){
            var triangleCoords = [];
            var color = i.color;
            $.each(i.points,function(ee,ii){
                    var lat = parseFloat(ii.lat);
                    var lon = parseFloat(ii.lon);
                    triangleCoords.push({lat:lat,lng:lon});
            });
            var bermudaTriangle = new google.maps.Polygon({
                 paths: triangleCoords,
                 strokeColor: '#FF0000',
                 strokeOpacity: 0.8,
                 strokeWeight: 2,
                 fillColor: color, 
                 fillOpacity: 0.35
            });
            bermudaTriangle.setMap(map);

  var pos = new google.maps.LatLng(lat,lon);
  var marker = new MarkerWithLabel({
          position: pos,
          map: map,
          labelAnchor: new google.maps.Point(3, 30),
         labelClass: Sclass, // the CSS class for the label
          labelInBackground: false
          });
            });
     }

I have tried using markerswithlabel.js

I include this script:

 <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&libraries=drawing&callback=initMap" defer></script>

and the standard

 <script src='markerLabel.js'></script>

but when i include markerLabel.js I get this error:

 Uncaught ReferenceError: google is not defined

I am trying to do something like this:

Try this: http://stackoverflow.com/questions/32692791/google-maps-api-markerwithlabel-js-uncaught-referenceerror-google-is-not-def — EugenSunic, Sep 30 '15 at 11:43
Surely the problem is that, whatever You can see this example of code https://jsfiddle.net/Ldhdt3tc/ or if you want to use svg watch this http://stackoverflow.com/questions/29046546/svg-static-image-within-the-area-of-a-polygon — Alimentador, Sep 30 '15 at 12:10
BTW - I get a javascript error with the posted code: `Uncaught ReferenceError: Sclass is not defined` — geocodezip, Sep 30 '15 at 14:27
Yea thanks. that is because i cut out some code that is irrelevant to the problem. — bart2puck, Sep 30 '15 at 17:04

score 0 · Answer 1 · answered Sep 30 '15 at 14:11

You are loading the Google Maps Javascript API asynchronously. The MarkerWithLabel library depends on that, so needs to be loaded after the Google Maps Javascript API has completed loading.

Either load the library asynchronously after the Google Maps Javascript API or load them both inline in the correct order.

google maps API polygon labels

1 Answers1