google drawing not outputing coordinates of point

Question

I have been using the google api for this, andthere are several similar posts, but nothing relating to this. I have written implementation very similar using polygons, but this one uses draw. I am getting an error "google is not defined"on the event listeners, and it makes no sense because the headers are the same as they are in the file that works. I am at a complete lost as why this is not showing the points as I mark them. Here is my code for the whole thing. JSBin:This is where I am at. http://jsbin.com/woqixir/edit?html,output This is my other snippet that I am working from on fiddle: https://jsfiddle.net/tubbstravis/864um322/ I am simply trying to do the same thing, but with draw.Instead of polygon.

 <!DOCTYPE html>
<html>
  <head>
    <title>HireMaster: Select Location</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }


     #map {
    width: auto;
    height: 600px;
    }
    #info {
        position: absolute;
        font-family: arial, sans-serif;
        font-size: 18px;
        font-weight: bold;
    }

    </style>
  </head>
  <body>
    <div id="map"></div>
      <div id="info">
    </div>
    <script>


      function initMap() {

          center: {lat: 38, lng: 265},
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.HYBRID
      var map = new google.maps.Map(document.getElementById('map'), {  
      });

        var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [





            ]
          },
          markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
          circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1

          }
        });
        drawingManager.setMap(map);
        google.maps.event.addListener(drawingManager, "dragend", getCoords);
        google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords);
        google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords);
        google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords);
      }


    function getCoords() {
        var len = drawingManager.getPath().getLength();
        var htmlStr = "";
        for (var i = 0; i < len; i++) {
            var counter = i + 1;
            htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>";
            console.log(htmlStr);
    }
    document.getElementById('info').innerHTML = htmlStr;

} 
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzUfosWJzaDKzYuffioH8liWWmbdPzwAQ&libraries=drawing&callback=initMap"
         async defer></script>
  </body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:13

You are loading the Google Maps Javascript API asynchronously:

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

But have code that requires the API to be loaded outside of the callback function (initMap):

google.maps.event.addListener(drawingManager, "dragend", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords);
google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords);

Move any code that depends on the Google Maps JavaScript API inside the initMap function.

Related question with working code:Google Maps API how to get the click listener to recognize drags

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 38,
      lng: 265
    },
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: []
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}


function getCoords() {
  var len = drawingManager.getPath().getLength();
  var htmlStr = "";
  for (var i = 0; i < len; i++) {
    var counter = i + 1;
    htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>";
    console.log(htmlStr);
  }
  document.getElementById('info').innerHTML = htmlStr;

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  width: auto;
  height: 600px;
}
#info {
  position: absolute;
  font-family: arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>
<div id="info"></div>

how do I fix this problem? I cannot simply remove async defer — , May 24 '16 at 18:06
Move that code inside the initMap function. There are other issues as well (the drawing manager doesn't have a `getPath` method, neither does a polygon). — geocodezip, May 24 '16 at 18:08
hmm. I do not understand why that would cause the problem, reference this https://jsfiddle.net/tubbstravis/864um322/ solution as why I do not understand. I am using getPath here as well, and it is very similar, but polygon instead of draw. I do not understand the difference on why it is not working. — , May 24 '16 at 18:32
You are not using the drawing manager in [that fiddle](https://jsfiddle.net/tubbstravis/864um322/) and all the event listeners are set up inside the initialize onload function. — geocodezip, May 24 '16 at 18:35
so is there no way to do what I want to do? Use drawing manager to get the coordinates like in the fiddle? — , May 24 '16 at 18:59
Of course you can get the coordinates. See the [linked related question for a working example](http://stackoverflow.com/questions/37371736/google-maps-api-how-to-get-the-click-listener-to-recognize-drags). What is wrong with the answer I provided to your question? — geocodezip, May 24 '16 at 19:12
I needed a little more information, but you gave that to me. I appreciate the guidance on this one. I have been working at this one for about 4 days and it has really had me. — , May 24 '16 at 19:14

google drawing not outputing coordinates of point

1 Answers1