Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps: Dynamically Movable and Resizable Circle Overlay Script for v3

Ok, I just found the perfect script I was looking for.

http://web3o.blogspot.com.br/2010/05/google-maps-dynamically-movable-and.html

You can add circles with lat/long and radius on Google Maps. The problem is that this script it's only for v2 api.

I found this one too http://www.mapdevelopers.com/draw-circle-tool.php

But there's no code or source available on it :(

Does anybody know any script like these that could work on v3?

Thank you

like image 253
saulob Avatar asked Jan 13 '23 22:01

saulob


2 Answers

That functionality is built in to the Google Maps API v3 Drawing Library

Example

You can customize it to just allow circles (or just allow one circle).

Working example

code snippet:

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    // Switch back to non-drawing mode after drawing a shape.
    drawingManager.setDrawingMode(null);
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas,
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map-canvas,
  #map_canvas {
    height: 650px;
  }
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
like image 55
geocodezip Avatar answered Feb 08 '23 23:02

geocodezip


function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: false,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE
      ]
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    // Switch back to non-drawing mode after drawing a shape.
    drawingManager.setDrawingMode(null);
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
  height: 100%;

  margin: 0;
  padding: 0;
}
#map-canvas,
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map-canvas,
  #map_canvas {
    height: 650px;
  }
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>
like image 32
Earl Tomines Avatar answered Feb 08 '23 23:02

Earl Tomines