I'm working on a page with several calls from the library functions, I happen to have two references to call the API, and each of them works with only a few of the functions I need,
For example, if I call:
< script src="https://maps.googleapis.com/maps/api/js?key=MyGoogleKey&libraries=drawing&callback=initMap"asyncdefer></script>Igetaccesstothedrawingbox,butanerrorappearsforthefunctionGBrowserIsCompatible
"Uncaught ReferenceError: GBrowserIsCompatible is not defined"
On my second attempt I called it:
< script src="https://maps.google.com/maps?file=api&v=3&key=MyGoogleKey&libraries=drawing"type="text/javascript" charset="utf-8" >
< /script >
I can call "GBrowserIsCompatible" BUT, the drawing box does not even appear .... and the error in the DrawingManager function (which is from the drawing box)
"Uncaught ReferenceError: DrawingManager is not defined"
REMEMBERING: Each method works perfectly when running separately,
Please, where am I going wrong? Here is an example of the code: I also put it in CodePen
<html>
<head>
<title>Drawing tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/**
* Always set the map height explicitly to define the size of the div
* element that contains the map.
*/
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
</head>
<body>
<div id="map_canvas" style=" border: 2px solid #3872ac;">
</div>
<div id="info">
</div>
<div id="info2">
</div>
<html>
<head>
<title>Drawing tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/**
* Always set the map height explicitly to define the size of the div
* element that contains the map.
*/
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px;
}
</style>
<!--
- parando de usar o google maps na versao 2
-->
<!--
<script src="https://maps.google.com/maps?file=api&v=3&key=AIzaSyDlSu5oKxhwIXvZ9c3ZVLGn-2rHvVC4EV0&libraries=drawing"type="text/javascript" charset="utf-8">
</script>
-->
</head>
<body>
<div id="map_canvas" style=" border: 2px solid #3872ac;">
</div>
<div id="info">
</div>
<div id="info2">
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: {
lat: 35.362152270911,
lng: 132.75379295934
},
zoom: 13
});
var drawingManager2 = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
// drawingModes: ['rectangle']
}
});
console.log(drawingManager2)
drawingManager2.setMap(map)
google.maps.event.addListener(drawingManager2, 'polygoncomplete', function(polygon) {
document.getElementById('info').innerHTML += "polygon points:" + "<br>";
for (var i = 0; i < polygon.getPath().getLength(); i++) {
document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
}
<!-- polygonArray.push(polygon); -->
});
google.maps.event.addListener(drawingManager2, 'rectanglecomplete', function(rectangle) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
document.getElementById('info').innerHTML +=
ne.lat() + ', ' + ne.lng() + '<br>' +
sw.lat() + ', ' + sw.lng();
});
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.565486108000073,133.04002472100001), 13);
var points1 = [
new GLatLng(35.565486108000073,133.04002472100001)
];
var polygon1 = new GPolygon(points1);
map.addOverlay(polygon1);
}
}
$(document).ready(function(){
initialize();
});
</script>
<!--
- chamando o google maps na versao 3
-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLk1GHCv9vQwx6N1TY19fFMrASoVh-vJk&libraries=drawing&callback=initMap" async defer>
</script>
</body>
</html>