0

I know this question has been asked before and I have followed a few answers but none seems to work. The closest I got was this one

Map Markers Not Displaying (JavaScript/Google Maps API V3)

But here I don't know what he trying to do and nonetheless I think my case is different and it didn't work for me. So please if anyone have any sugeestions please tell me.

function initialize() {
            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(52.5498783, 13.425209099999961),
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            
            overlay = new DraggableOverlay(map,
                                           map.getCenter(),
                                           '<div class="overlay">drag me!</div>'
                      );


        }
        
        DraggableOverlay.prototype = new google.maps.OverlayView();

        DraggableOverlay.prototype.onAdd = function () {
            var container = document.createElement('div'),
                that = this;

            if (typeof this.get('content').nodeName !== 'undefined') {
                container.appendChild(this.get('content'));
            }
            else {
                if (typeof this.get('content') === 'string') {
                    container.innerHTML = this.get('content');
                }
                else {
                    return;
                }
            }
            container.style.position = 'absolute';
            container.draggable = true;
            google.maps.event.addDomListener(this.get('map').getDiv(),
                                             'mouseleave',
                                              function () {
                                                  google.maps.event.trigger(container, 'mouseup');
                                              }
            );


            google.maps.event.addDomListener(container,
                                             'mousedown',
                                         function (e) {
                                             this.style.cursor = 'move';
                                             that.map.set('draggable', false);
                                             that.set('origin', e);

                                             that.moveHandler = google.maps.event.addDomListener(that.get('map').getDiv(),
                                                                                                  'mousemove',
                                                                                                  function (e) {
                                                                                                      var origin = that.get('origin'),
                                                                                                          left = origin.clientX - e.clientX,
                                                                                                          top = origin.clientY - e.clientY,
                                                                                                          pos = that.getProjection()
                                                                                                                    .fromLatLngToDivPixel(that.get('position')),
                                                                                                          latLng = that.getProjection()
                                                                                                                    .fromDivPixelToLatLng(new google.maps.Point(pos.x - left,
                                                                                                                                                                pos.y - top));
                                                                                                      that.set('origin', e);
                                                                                                      that.set('position', latLng);
                                                                                                      that.draw();
                                                                                                  });


                                         }
           );

            google.maps.event.addDomListener(container, 'mouseup', function () {
                that.map.set('draggable', true);
                this.style.cursor = 'default';
                google.maps.event.removeListener(that.moveHandler);
            });


            this.set('container', container)
            this.getPanes().floatPane.appendChild(container);
        };

        function DraggableOverlay(map, position, content) {
            if (typeof draw === 'function') {
                this.draw = draw;
            }
            this.setValues({
                position: position,
                container: null,
                content: content,
                map: map
            });
        }



        DraggableOverlay.prototype.draw = function () {
            var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
            this.get('container').style.left = pos.x + 'px';
            this.get('container').style.top = pos.y + 'px';
        };

        DraggableOverlay.prototype.onRemove = function () {
            this.get('container').parentNode.removeChild(this.get('container'));
            this.set('container', null)
        };


        google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .overlay{
        background:yellow;
        padding:30px;
        border:4px double black;
      }
<div id="map-canvas"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7FTNE22Wl6S6DTQF83sTZTqbFFPzEkmU&libraries=drawing,places,geometry&callback=initialize">
    
   </script>

So here as you can see I am getting two issues

  • Google is not defined
  • this.setValues is not a function

So please if anyone faced this issue let me know.

Community
  • 1
  • 1
Arpit Saxena
  • 39
  • 1
  • 9

1 Answers1

0

google is not defined: if you are asynchronously loading the API, you need to put all the code that depends on the API inside the callback function (initialize in your case). Anything that depends on the API won't work until the API is loaded. You would need to move the definition of DraggableOverlay inside initialize or load the API synchronously.

Example below without the asynchronous load of the API (like the example in the documentation and Dr.Molle's answer that it looks like the DraggableOverlay came from: Can we make custom overlays draggable on google maps V3) 

function initialize() {
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  overlay = new DraggableOverlay(map,
    map.getCenter(),
    '<div class="overlay">drag me!</div>'
  );
}

DraggableOverlay.prototype = new google.maps.OverlayView();
DraggableOverlay.prototype.onAdd = function() {
  var container = document.createElement('div'),
    that = this;

  if (typeof this.get('content').nodeName !== 'undefined') {
    container.appendChild(this.get('content'));
  } else {
    if (typeof this.get('content') === 'string') {
      container.innerHTML = this.get('content');
    } else {
      return;
    }
  }
  container.style.position = 'absolute';
  container.draggable = true;
  google.maps.event.addDomListener(this.get('map').getDiv(),
    'mouseleave',
    function() {
      google.maps.event.trigger(container, 'mouseup');
    }
  );

  google.maps.event.addDomListener(container,
    'mousedown',
    function(e) {
      this.style.cursor = 'move';
      that.map.set('draggable', false);
      that.set('origin', e);

      that.moveHandler = google.maps.event.addDomListener(that.get('map').getDiv(),
        'mousemove',
        function(e) {
          var origin = that.get('origin'),
            left = origin.clientX - e.clientX,
            top = origin.clientY - e.clientY,
            pos = that.getProjection()
            .fromLatLngToDivPixel(that.get('position')),
            latLng = that.getProjection()
            .fromDivPixelToLatLng(new google.maps.Point(pos.x - left,
              pos.y - top));
          that.set('origin', e);
          that.set('position', latLng);
          that.draw();
        });
    }
  );
  google.maps.event.addDomListener(container, 'mouseup', function() {
    that.map.set('draggable', true);
    this.style.cursor = 'default';
    google.maps.event.removeListener(that.moveHandler);
  });
  this.set('container', container)
  this.getPanes().floatPane.appendChild(container);
};

function DraggableOverlay(map, position, content) {
  if (typeof draw === 'function') {
    this.draw = draw;
  }
  this.setValues({
    position: position,
    container: null,
    content: content,
    map: map
  });
};


DraggableOverlay.prototype.draw = function() {
  var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
  this.get('container').style.left = pos.x + 'px';
  this.get('container').style.top = pos.y + 'px';
};

DraggableOverlay.prototype.onRemove = function() {
  this.get('container').parentNode.removeChild(this.get('container'));
  this.set('container', null)
};

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
.overlay {
  background: yellow;
  padding: 30px;
  border: 4px double black;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places,geometry">
</script>
Community
  • 1
  • 1
geocodezip
  • 158,664
  • 13
  • 220
  • 245