Estou transferindo minhas aplicações para a versão 3 dessa API, mas estou realmente apanhando muito.
Acontece que, embora tudo pareca estar no lugar, conforme o exemplo do próprio google , fica me retornando dois erros:
Uncaught TypeError: Cannot read property 'firstChild' of null
e
Uncaught ReferenceError: GBrowserIsCompatible is not defined
Eis meu codigo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<!--
- Google maps api v.3
-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLk1GHCv9vQwx6N1TY19fFMrASoVh-vJk&libraries=drawing&callback=initMap" type="text/javascript" async defer></script>
</head>
<body>
<div id="map_canvas" style=" border: 2px solid #3872ac; height: 300px; width: 300px;">
</div>
<div id="info">
</div>
<div id="info2">
</div>
</body>
</html>
<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']
}
});
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() +'<font color=red>x</font>' + ne.lng() + '<br>' +
sw.lat() +'<font color=red>x</font>' + sw.lng();
});
}
function initialize() {
/** google maps Version 3 functions*/
var map = new google.maps.Map(
document.getElementById('map_canvas'), {
center: new google.maps.LatLng(35.565486108000073, 133.04002472100001),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.565486108000073, 133.04002472100001),
map: map
});
}
$(document).ready(function(){
initialize();
});
</script>
Tambem coloquei no CodePen para conferencia (eh preciso abrir o console para ver os erros!)
Para ser mais especifica, o erro esta na linha "google.maps.Map" ele parece nao estar conseguindo pegar o "mapa e seu ID"...
O que pode ser ?
Obrigada!