Put movable circle over google map and get center position and radius - javascript

I would like to put in my map on site something similar like on this site
When choose Personalize Your Search, I need to get gps of circle center and zoom and radius.
How could I achieve this?
All help is appreciated.

Why don't you add a draggable marker to you map?And the icon of the marker can be an icon with a circle around it.

If you use the Google Maps API V3, then you have the google.maps.Circle class. The circle gives you all the information you are requesting through it's methods:
getRadius()
getCenter()
It also has events, so that you can listen to mouse clicks on your map and move the circle to that click.

Thats how you can make a draggable element using Jquery, but not quite sure about getting a GPS location.
http://jqueryui.com/demos/draggable/

You can then find out the latitude, longitude when mouse moves over map. These lat and long info with help you to geocode the address and you can play around once you have current longitude and latitude information.

Related

Is there a way to check if any part of a data layer in google maps is within the bounds of the map?

I have a list of geojson polygons that i am showing on my map, i am trying to determine, based on the current bounds of the map, if any part of the polygon is on the map. Any ideas as far as functions in the api to determine this?
I have tried the bounds.contains() method but it looks like that needs a specific point rather than an area.
Eric, I think you can get a center point of each polygon and set marker to it. So you can use it to represent a polygon.

Animate zoom to google map location on click(custom google maps controls)

I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button

HTML5 Javascript - Using Lat/Lon on a map without actually drawing a map

I need to use Longitude and Latitude coordinates on a map that will be loaded in by an external program, and I need to be able to draw things on this map and be able to zoom in and out. Thing is, I cannot draw this map, and I need to be able to interact with both the map elements and with what I'm drawing.
I tried using Google, and found that I was able to control either my canvas or the map, but not both at the same time. Plus, I could not draw things properly on top of Google's map (I'm using Easel.js).
If anyone has any sources or advice, it will be much appreciated.
OK I figured this out with help from my web dev friend. He suggested I use Google Maps, and even though I have that whole "layering" issue (with all my events being captured in the canvas and not trickling down to the 'map-canvas' div), I should go and set up events that capture things like zoom and drag, and pipe them along to my Google Map, and the result is prefect for what I am looking for.
So now I have my Easel.js canvas on top of my Google map, and I just have to set up lat/lng positions for my objects when I want them to be part of the map!
Thanks for the help, everyone!

Place marker at the border of a circle - Google Maps API

Currently, I have a google maps with two types of markers. One marker is the "main" marker. This marker has a circle around it.
The other type of markers behave like "children" of the main marker. They are inside the circle illustrating that these markers are inside the allowed area. The child markers send their geolocation (lat/long) through its GPS. There are cases when the devices don't have geolocation data. In this situation, I need to put then "out" of the circle.
I have an idea but I can't make it work. Since I have the circle, is there a way to put these markers at the right border of the circle?
I looked into the docs for the maps api, I managed getting the circle bounds property. I also tried using the getBounds().getNorthEast() But it places my marker to far from the circle and that's not what I want.
The bounds is rectangular. getNorthEast is the north eastern corner, you want the point on the center of the right edge, not the corner. Or use the computeOffset method of the geometry library

Google Streetview: Show markers within given radius

I have added custom markers to google maps streetview view without a problem. I am now wanting to show the markers I have added only when the user is within a few degrees of the markers coordinates and not visible when panning around street view from farther distances. I have seen a few forum posts about removing markers when in a given radius but not the reverse.
Litte more background... I am trying to make a simple easter egg hunt game using the streetview api.
Any thoughts are greatly appreciated!
You said "I have seen a few forum posts about removing markers when in a given radius but not the reverse", use that mechanism and reverse the test.

Categories

Resources