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
JavaScript
x
74
74
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Draw </title>5
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>7
<style>8
html,9
body,10
#map-canvas {11
height: 90%;12
margin: 0px;13
padding: 0px14
}15
</style>16
<script type="text/javascript">17
var map; // Global declaration of the map18
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow19
var lat_longs = new Array();20
var markers = new Array();21
var drawingManager;22
function initialize() {23
var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);24
var myOptions = {25
zoom: 13,26
center: myLatlng,27
mapTypeId: google.maps.MapTypeId.ROADMAP}28
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);29
drawingManager = new google.maps.drawing.DrawingManager({30
drawingMode: google.maps.drawing.OverlayType.POLYGON,31
drawingControl: true,32
drawingControlOptions: {33
position: google.maps.ControlPosition.TOP_CENTER,34
drawingModes: [google.maps.drawing.OverlayType.POLYGON]35
},36
polygonOptions: {37
editable: true38
}39
});40
drawingManager.setMap(map);41
42
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {43
var newShape = event.overlay;44
newShape.type = event.type;45
});46
47
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){48
overlayClickListener(event.overlay);49
$('#vertices').val(event.overlay.getPath().getArray());50
});51
}52
function overlayClickListener(overlay) {53
google.maps.event.addListener(overlay, "mouseup", function(event){54
$('#vertices').val(overlay.getPath().getArray());55
});56
}57
initialize();58
59
$(function(){60
$('#save').click(function(){61
//iterate polygon vertices?62
});63
});64
</script>65
66
<script src="https://maps.googleapis.com/maps/api/js?key=[my api key]&libraries=drawing"></script>67
<div id="map_canvas" style="width:500px; height:450px;"></div>68
<form method="post" accept-charset="utf-8" id="map_form">69
<input type="text" name="vertices" value="" id="vertices" />70
<input type="button" name="save" value="Save!" id="save" />71
</form>72
</body>73
</html>74
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:
JavaScript
1
72
72
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Draw </title>5
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>7
<style>8
html,9
body,10
#map-canvas {11
height: 90%;12
margin: 0px;13
padding: 0px14
}15
</style>16
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"></script>17
</head>18
<body>19
<div id="map_canvas" style="width:500px; height:450px;"></div>20
<form method="post" accept-charset="utf-8" id="map_form">21
<input type="text" name="vertices" value="" id="vertices" />22
<input type="button" name="save" value="Save!" id="save" />23
</form>24
<script type="text/javascript">25
var map; // Global declaration of the map26
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow27
var lat_longs = new Array();28
var markers = new Array();29
var drawingManager;30
function initialize() {31
var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);32
var myOptions = {33
zoom: 13,34
center: myLatlng,35
mapTypeId: google.maps.MapTypeId.ROADMAP}36
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);37
drawingManager = new google.maps.drawing.DrawingManager({38
drawingMode: google.maps.drawing.OverlayType.POLYGON,39
drawingControl: true,40
drawingControlOptions: {41
position: google.maps.ControlPosition.TOP_CENTER,42
drawingModes: [google.maps.drawing.OverlayType.POLYGON]43
},44
polygonOptions: {45
editable: true46
}47
});48
drawingManager.setMap(map);49
50
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {51
var newShape = event.overlay;52
newShape.type = event.type;53
});54
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){55
overlayClickListener(event.overlay);56
$('#vertices').val(event.overlay.getPath().getArray());57
});58
}59
function overlayClickListener(overlay) {60
google.maps.event.addListener(overlay, "mouseup", function(event){61
$('#vertices').val(overlay.getPath().getArray());62
});63
}64
initialize();65
$(function(){66
$('#save').click(function(){67
//iterate polygon vertices?68
});69
});70
</script>71
</body>72
</html>