Googlemaps with two Apis?

Asked

Viewed 173 times

1

I’m working on a page with several calls from the functions of this library, turns out, I have two references to call the API and, each of them works with only one part 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" 
    async defer >
< /script >

I can access the drawing box, but error appears for the function Gbrowseriscompatible 

"Uncaught ReferenceError: GBrowserIsCompatible is not defined"



On my second attempt I called it so:

< 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 appear.... and the error in function Drawingmanager (that eh from the drawing box)

"Uncaught ReferenceError: DrawingManager is not defined"



REMEMBERING: Each method works perfectly when running separately,

Please where I’m going wrong?
Here is an example of the code: also put in the 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>
      <script src="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>
google-maps

  • Which part doesn’t work? Running on Codepen, the drawing box appears and the two listeners are running.

  • 1

    Good morning! Well I spent the weekend reviewing it at home, and I don’t think I know how to explain it better, because the same mistake continues. So I commented more on the example of Codepen, WHERE ___1) if called the API by lines 27 to 32, "Gbrowseriscompatible()" works smoothly, But the Drawing Box does not, ___2) On the other hand, if "called" the API by lines 131 to line 136, the drawing box and that stops. SO: how could I possibly explain this error better... because .. ___3) PRECISE FUNCTION Gbrowseriscompatible() and the drawing box operating simultaneously!

  • 1

    When you switch calls to the API, (or put both simultaneously) errors and alerts will appear in the Inspector’s console... for example: Uncaught Referenceerror: Gbrowseriscompatible is not defined or You have included the Google Maps API Multiple times on this page. This may cause Unexpected errors.

  • 1

    From what I understood on the site https://developers.google.com/maps/documentation/javascript/v2tov3?hl=pt-br , the 3rd version of googlemaps (which allows the drawing box) no longer has those functions... that are important to me. for example Glatlng which was exchanged for google.maps.Latlng So I’m gonna have a big headache to learn how to use these new functions.

  • 1

    Well I guess now I can just stop using Gbrowseriscompatible and change function Gmap2() for google.maps.Map, what seemed easy, by the examples of the page https://stackoverflow.com/questions/12500654/uncaught-referenceerror-google-is-not-defined ___BUT, this damage a new mistake... Uncaught Referenceerror: google is not defined..... I accept more help and tips to solve this...

  • 1

    In this update you put up has a problem that is the function initialize. It is called before the Maps API has loaded. You must call the map functions in the function initMap.

Show 1 more comment
No answers

Browser other questions tagged google-maps

You are not signed in. Login or sign up in order to post.