I found bellow code to display Circle by click event with Radius 60.0m.(google maps API v3). https://stackoverflow.com/questions/15111403/google-maps-api-v3-change-circle-radius-by-click-event
I want to display a circle (within a limit of 3000m, 5000m ) and the popup window to appear attribute details of buffer zone. (school name and the school type & etc.,).
Please help me to properly place a this JavaScript code into my HTML page.
[GIS] How to use Google Maps API V3 to diplay circle with Openlayers
google-maps-apiopenlayers-2
Related Solutions
Use a Cluster Strategy in combination with a BBOX Strategy.
Perhaps you should come at this from a different angle. You are not far off with your Restrict Area idea. Don't dismiss this idea too soon as reducing the usefulness of the tool.
In your current approach you are loading all sites at once and then adding them to a vector layer. This means that at any one time there is the potential that the browser will contain more data than the user can see (depending on zoom level etc) as most data will be outside of their viewport bounds. You can utilise this fact to optimise the loading of the data into the user's browser by only requesting the data from the server that falls within the bounds of the user's current view.
You can implement a BBOX refresh strategy to your vector layer by adding a OpenLayers.Strategy.BBOX strategy object to your vector layer. When the view is invalidated (by a pan or zoom action) the BBOX strategy will cause the layer to request new data from the backend server. To implement this approach you will need to tweak your server side function to accept the additional parameters OpenLayers will add to the data request and you will also need to return the data in a format that can be read by OpenLayers. It is pretty straight forward to implement and you should notice a massive increase in performance across all browsers.
There is an example on the OpenLayers website of implementing the BBOX strategy. You could also consider adding a Cluster strategy for small scales when there is potentially large volumes of features returned from a request, or implement some scale dependent rendering of the layer.
You need to use LatLng instead of LatLong:
center = new google.maps.LatLng(-30.0330600,-51.230000);
Also, if you use a map_element with a bigger width:
<!--Elemento HTML onde o mapa é exibido -->
<div id='map_element' style='width: 500px; height: 500px;'></div>
everything will be ok:
Best Answer
It would be better to draw the circle with OpenLayers. But if you want to do it with the GMaps API, you can use the following to get a reference to the GMaps map instance: