refresh the circle on google map - google-maps

I'm implementing an application in which I have to show google map with circle at the center of the map. I'm able draw a circle on map but after few seconds I've to update the circle's radius. I want to use same instance of map rather than creating new one.
When i create the new circle its overlapping on older circle. I want to remove previously added circle and show new one.
While checking the api I got this method from Circle class which will hide the circle.
myCity.setOptions({visible:false});
but the problem is I don't have access to older circle instance.
Is there any way which will allow me to get maps markers and infoboxes assigned to that map and remove them?
Below is method which will get called interval of few seconds
function mapByCoordinates()
{
var lat=document.getElementById("latValue").value;
var lng=document.getElementById("lngValue").value;
var accuracy = document.getElementById("zoomValue").value;
var zoomVal=getZoomBasedOnAccuracy(accuracy);
var zm = parseInt(zoomVal);
var tempRadius = getRadiusBasedOnAccuracy(accuracy);
var amstr = new google.maps.LatLng(lat,lng);
var mapProp = {
center:amstr,
zoom:zm,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map.setOptions(mapProp);
myCity.setOptions({visible:false});
infobox.close();
myCity = new google.maps.Circle({
center:amstr,
radius:tempRadius
});
marker=new google.maps.Marker({
position:amstr,
});
myCity.setMap(map);
myCity1.setMap(map1);
infobox = new google.maps.InfoWindow({
content:"Welcome to google map",
disableAutoPan:true
});
infobox.open(map,marker);
map.panTo(amstr);
map.setZoom(19);
}
Thanks

We can make the already drawn circle invisible on google maps by using following method
circle.setOptions({visible:false});
and can null the instance of that map.

Try circle.setRadius(radiusvalue)

Related

Circle not draw in Google Maps with OpenLayers

I am trying to draw a circle in OpenLayers using Google Maps (olGM).
I donĀ“t know why it not draw a circle, because in OSM working perfectly.
var circle = new ol.geom.Circle(ol.proj.transform([latd, lond], 'EPSG:4326',
'EPSG:3857'), 1000);
var center = circle.getCenter();
var CircleFeature = new ol.Feature(circle);
Edit again. Finally I could to draw the Circle. But, my question is, how can I access to Radius and Center from Circle1? And modifying Circle1, I modify Circle in the same time.
I am using:
var circle1 = new ol.geom.Circle(ol.proj.transform([latd, lond],
'EPSG:4326', 'EPSG:3857'), radius);
var circle = new ol.geom.Polygon.fromCircle(circle1, 232, 0);
var CircleFeature = new ol.Feature(circle);
Circle geometries are currently not supported in ol3-google-maps, see: https://github.com/mapgears/ol3-google-maps/blob/master/LIMITATIONS.md#circle-geometry
If you wish to contribute it, you can create a pull request on the library's GitHub.

How to check if marker is out of specific constant bounds? - Google Maps API v3

I'm new in GoogleMaps API v3, I have speficied a bounds in my geocoder config, with this code:
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868))
Now, the search are more accurately :-) But, now I want to display an alert if user drags the marker out of THAT bounds specified. How I can achieve that?
In short, I want to prevent the user place the marker outside the region
So you want to have an event listener for when the marker is dragged, using the bounds' contains function. Also if you really want to prevent them dragging that marker outside of the bounds, you probably also need to keep track of what the position was originally, and reset it back there if you have to. Something like this:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868));
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5087531, -0.1281153),
draggable: true
});
var markerPosition;
marker.addListener('dragstart', function() {
markerPosition = this.getPosition();
});
marker.addListener('dragend', function() {
if (bounds.contains(this.getPosition()) == false) {
alert("You've dragged the marker outside of the bounds allowed. We've reset it");
this.setPosition(markerPosition);
}
});
PS: I've also extended this answer into a blog post, including how to do the same with a polygon as well as bounds.
On a LatLngBounds object you can call the contains() function which takes a LatLng parameter and returns true\false if its contained with the LatLngBounds you have defined.
So in your case you can listen to the dragend event on your marker and in the listener handler use the approach above.

Overlapping Marker Spiderfier Marker Icon When There are Multiple Markers at Same Location

Google Maps doesn't provide a way to break apart multiple markers that are at the same location. This can occur with a people or businesses at a multiple residency location such as an apartment building or professional services building. Depending at zoom level it can also occur at shopping malls, etc.
The way around that is to "spiderfy" them: when clicking on the first it breaks them out with a line to the location. This is done in Google Earth and George MacKerron wrote a package to do that for Google Maps. (https://github.com/jawj/OverlappingMarkerSpiderfier)
It can be integrated with markerclusterer, although it doesn't support marker clusterer's batch creation of markers.
My issue is that the application I'm working on wants to have specific icons for different types of activities. Spiderfier puts one of the markers on top. A person looking at the map has no way of knowing that there can be 10 or more other markers underneath the top marker.
Ideally, there would be a way to put a top marker that displays when there are multiple markers similar to the different icon in markercluster. It isn't a direct 1-to-1 since spiderfier also works when they are close but not exactly at the same location (default is 20 pixels) and markercluster has no provision for accessing multiple markers at the exact same location.
The ideal behavior would be have a special icon for spiders that broke into the spiderfied individual icons when clicked. Similar to markerclusterer, but without the zoom change and handling the same location. The special icon ideally would indicate how many other markers are at the spot, again like markerclusterer. The special icon could be hidden or become part of the spiderfied group.
Without some accommodation users would have no way of knowing multiple activities are at the location. They may even assume that the activity they want is not at that location because another activities marker is shown.
This is a plunker that has the problem: http://plnkr.co/edit/vimZNq?p=info
var markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < 100; ++i) {
var latLng = new google.maps.LatLng(Math.floor(Math.random() * 10) / 10 + 39,
Math.floor(Math.random() * 10) / 10 - 100);
var marker = new google.maps.Marker({
position: latLng,
title: "marker " + i + " pos: " + latLng,
maxZoom: 8,
map: map
});
marker.desc = marker.getTitle();
bounds.extend(latLng);
markers.push(marker);
oms.addMarker(marker);
}
map.fitBounds(bounds);
var markerCluster = new MarkerClusterer(map, markers);
Thanks for your help,
David
Here's how I got it to work. Where map is a Gmap instance and oms is an Overlapping Marker Spiderfier instance. We're also using Marker Clusterer on the initial zoom which buys us a break.
map.addListener('zoom_changed', function() {
map.addListenerOnce('idle', function() {
// change spiderable markers to plus sign markers
// we are lucky here in that initial map is completely clustered
// for there is no init listener in oms :(
// so we swap on the first zoom/idle
// and subsequently any other zoom/idle
var spidered = oms.markersNearAnyOtherMarker();
for (var i = 0; i < spidered.length; i ++) {
// this was set when we created the markers
url = spidered[i].icon.url;
// code to manipulate your spidered icon url
};
});
});
oms.addListener('unspiderfy', function(markers) {
var spidered = markers;
for (var i = 0; i < spidered.length; i ++) {
url = spidered[i].icon.url;
// change it back
};
});
oms.addListener('click', function(marker) {
// put the clicked-on marker on top
// when oms un-spiders
marker.zIndex=999;
// set infowindow, panning etc.
});
I managed to match the following Versions:
MarkerClusterer 2.0.13
OverlappingMarkerSpiderfier 3.27
On every creation of a new Marker, i store the initialIconUrl in the Marker Object
var marker = new google.maps.Marker({
position: //some position
});
marker.setIcon(iconUrl);
marker.initialIconUrl = iconUrl;
When declaring the OverlappingMarkerSpiderfier, set the nearbyDistance to 0.001 (or some other very small value).
this.oms = new OverlappingMarkerSpiderfier(this.map, {
markersWontMove: true,
markersWontHide: true,
nearbyDistance: 0.001 //This will only spiderfy the Markers if they have the exact same position
});
Then, we need a listener on the maps 'idle' Event, to format the Markers manually.
I needed this because my SPIDERFIABLE Marker wouldn't show correctly on the first step, when transferring from the Clustered Marker to the seperate Markers.
var me = this;
google.maps.event.addListener(this.map, 'idle', function () {
me.oms.formatMarkers();
});
Listen to the oms 'format' Event and set the iconURL for Markers that are SPIDERFIABLE.
If the Marker is not spiderfiable, reset the Icon to the initial Url.
var spiderfiableIconUrl = //Whatever you need
this.oms.addListener('format', function (marker, status) {
var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE
? spiderfiableIconUrl :
marker.initialIconUrl;
marker.setIcon(iconURL);
});
Hope this helps.
Some methods seems to be interesting like markersNearAnyOtherMarker but I cannot get it work.
An interesting way could be to use spiderfy and unspiderfy events and change marker when it's fired
overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel('*');
marker.setIcon(myNormalIcon);
})
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel(''+markers.length);
marker.setIcon(myOverlapIcon);
})
})
Unfortunatly, the unspiderfy event isn't fired until we open then close the overlap marker. If I find a conclusion to this solution I will update this post.

How can I draw marker on google maps in specified boundary?

I want to draw marker on google maps. The marker data is from JSON.(from json file, not from database) and all data have a geometry (latitude, longitude)
An important thing is when I drag google maps, the browser will show some boundary.
And then the markers have to show on only shown maps.
After drag map again, the marker resets and show new marker in new boundary.
google.maps.event.addListener(map, 'dragend', function(event) {
var bd = map.getBounds();
var ne = bd.getNorthEast();
var sw = bd.getSouthWest();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
I can not progress any more..
Please give some example url or help..
So you've got the points for the 4 corners of some kind of boundary, and you want to put a marker in there. So you have a bunch of markers, but you only want to plot the ones that fall within the current bounds.
So something like this might work:
var latlng = new google.maps.LatLng(54.42838,-2.9623);
var marker = new google.maps.Marker({
position: latlng,
});
if (bd.contains(latlng)) {
marker.setMap(map);
}
You might want to setMap(null) for any markers that fall outwith the bounds.

What's the coding for displaying many locations in google map using latitude and longitude value

I used this code but its not working.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(10.35,79.4167), 13);
var marker = new GMarker(new GLatLng(10.35,79.4167));
map.setCenter(new GLatLng(8.7167,77.483), 14);
var marker = new GMarker(new GLatLng(8.7167,77.483));
map.setCenter(new GLatLng(21.83,78.75), 15);
var marker = new GMarker(new GLatLng(21.83,78.75));
map.addOverlay(marker);
map.setUIToDefault();
}
}
Your code will only add the last marker. You are only calling addOverlay once at the end (so only the last marker will be added to the map).
You also call setCenter multiple times, so only the last setCenter will be applied to the map. setCenter just sets the visible area on the Google Map.
You are using Google Maps v2 in your code, I suggest you check out the more current v3 API. If you are starting a new project, you may as well use the latest stuff.
If you have some other reason for using the v2 API, there is a range of good samples to get you started.