I am trying to create a page that shows google map and allows users to draw lines on the map and save them.. but when I try to run the page, the map doesn’t show up at all. What am I doing wrong? the page is literally blank with the form at the end.
I was having a look online for a solution.. I found this code and modified it with my api key
<!DOCTYPE html> <html> <head> <title>Draw </title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> html, body, #map-canvas { height: 90%; margin: 0px; padding: 0px } </style> <script type="text/javascript"> var map; // Global declaration of the map var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow var lat_longs = new Array(); var markers = new Array(); var drawingManager; function initialize() { var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.POLYGON] }, polygonOptions: { editable: true } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { var newShape = event.overlay; newShape.type = event.type; }); google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ overlayClickListener(event.overlay); $('#vertices').val(event.overlay.getPath().getArray()); }); } function overlayClickListener(overlay) { google.maps.event.addListener(overlay, "mouseup", function(event){ $('#vertices').val(overlay.getPath().getArray()); }); } initialize(); $(function(){ $('#save').click(function(){ //iterate polygon vertices? }); }); </script> <script src="https://maps.googleapis.com/maps/api/js?key=[my api key]&libraries=drawing"></script> <div id="map_canvas" style="width:500px; height:450px;"></div> <form method="post" accept-charset="utf-8" id="map_form"> <input type="text" name="vertices" value="" id="vertices" /> <input type="button" name="save" value="Save!" id="save" /> </form> </body> </html>
Advertisement
Answer
- your HTML is invalid (no end tag for head, no start tag for body).
- when you are loading the API synchronously, you need to include it before you use it.
- when you are loading the API synchronously, you need to move the javascript after the DOM
code snippet:
<!DOCTYPE html> <html> <head> <title>Draw </title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> html, body, #map-canvas { height: 90%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script> </head> <body> <div id="map_canvas" style="width:500px; height:450px;"></div> <form method="post" accept-charset="utf-8" id="map_form"> <input type="text" name="vertices" value="" id="vertices" /> <input type="button" name="save" value="Save!" id="save" /> </form> <script type="text/javascript"> var map; // Global declaration of the map var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow var lat_longs = new Array(); var markers = new Array(); var drawingManager; function initialize() { var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.POLYGON] }, polygonOptions: { editable: true } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { var newShape = event.overlay; newShape.type = event.type; }); google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ overlayClickListener(event.overlay); $('#vertices').val(event.overlay.getPath().getArray()); }); } function overlayClickListener(overlay) { google.maps.event.addListener(overlay, "mouseup", function(event){ $('#vertices').val(overlay.getPath().getArray()); }); } initialize(); $(function(){ $('#save').click(function(){ //iterate polygon vertices? }); }); </script> </body> </html>