Develop Reference

How to position an element on an SVG path at certain point?

I've been searching for hours for a tutorial on how to re-create the map/chart functionality displayed on this page.
When you hover your cursor over the histogram chart at different points (which shows elevation) it moves a pin/cursor on the google map to indicate what point on the map the elevation relates to.
Hard to explain but easier if you click on the link and see for yourself.
https://www.greaterhobarttrails.com.au/track/north-south-track/
map & chart
Any guidance is appreciated.
Thank you for your time.
John.

Below are just some guiding points, how to approach this task(probably not the best solution, but should work).
As the first requirement in your path array each point should have three properties - latitude, longitude, elevation.
To build the chart you need to use some of the chart libraries - it should support the mouseover event (here are some examples for chart libraries - https://www.sitepoint.com/15-best-javascript-charting-libraries/). Y-axis is elevation, X-axis can be distance from the beginning of the path(distance should be calculated for each point beforehand).
As the third step you need to show your path on the map - to do that you can use google maps api (https://developers.google.com/maps/).
In the end you need to connect chart and map, you need to subscribe for mouseover event from the chart. When handling that, you're interested in which path point is currently hovered by user. Afterwards you can take coordinates from it and add a marker on the map based on these coordinates.

I can point you to the right direction with some helping methods from my own plugin pathAnimator:
You need to attach a mousemove event on the bottom element (in your specific example) so you can get the x percentage (from 0 to 100).
using the above value, use pathAnimatorm or any of it's methods, to position your marker element on the path of the map at the right point.
you can use pointAt method for that, check the demo at the link above and you'll understand how it's done.

Drawing polygons on Google Maps

I was drawing polygons using Polygon Creator Class on Google Maps. As you see this tool is not easy to use. For example, it's impossible to add new polygon or edit some of them after getting result code.
In following link when you zoom in between polygons you will see gaps that I want to remove. To recreate the issue please open following link and zoom in between polygons:
http://jsbin.com/bovogaqowu/1/edit?js,output
Now question is, how to remove gap between these polygons ? In this case I can't use the tool that I used to create this map.
And which tool is better to use in this situation ?
Thank for your time

I would suggest you using the Google's official tool for drawing, editing, locatiing and even finding driving directions for the markers you have placed on the maps. You can always save these edited maps and retrieve them later when you need them.
Please click the following link and get started!!
Even I tried drawing some polygons side by side and there were no gaps :)
Hope this would help!!

BingMap get polygons in view

I have map with 30-50 polygons on it. There are like 4000 points in every polygon but they are hidden at beginning. I want to disply the point only when zoom is <=6 but not all of the point but only ones related to the currently displayed polygon(s). So I need to get the polygons in view (displayed in this moment on the screen).
Do you know how to get the polys in view ?
ps.Im working with javascript

Wont be quick if you have complex or lots of polygons but works (assumes v7 api):
https://gist.github.com/1704172

Google Maps v3 Polygon, Polyline intersection

I have a polygon and polyline created dynamically. Now I need to check whether they both intersect each other or not.
When a user comes and places a marker i'm creating a polygon with some radius as the buffer distance. I have the polylines(routes) pre defined in my database. I need to get that polylines and check whether they are intersecting or not.
I didn't find any kind of methods in the google maps v3 API. someone please help me for the same.
Thanks,
Karthik Reddy

Good starting point is checking if a point is in a polygon. Below is a link which shows it done for a point. Since a line is a collection of points you have to check an array of points would have to modify the code below to check an array of points (your polyline)
https://web.archive.org/web/20160414021100/http://blog.appdelegateinc.com/point-in-polygon-checking-with-google-maps.html
(note this works with api v2) but it could be easily converted to v3

Google Maps v3 panTo() from getCenter() lat lng doesn't go to same location

I'm using getCenter() to use the lat lng in a url so users can share / bookmark a location on Google Maps. I then use panTo() to try and jump back to the same location. Though it always jumps back to approximately the same location it's never exactly the same view.
I've thought about using setCenter() instead of panTo() but this can mess up the referencing calculation for the custom map layer I'm displaying. Depends where the center happens to be.
To see the problem in action you can go to http://www.topomap.co.nz/ and use the "Share" tab to get a url generated from getCenter(). Using the url you'll notice they show slightly different centers.
Please note that I'm currently using latLng.toUrlValue() which reduces some of the accuracy, but you can manually tweak the url from the individual lat long given in the "Share" tab and you'll still see the same problem.
Any ideas what might be going on?

You may get the bounds of the map using map.getBounds() before transition and then when you need to get back to this view use
fitBounds(bounds:LatLngBounds)
or
panToBounds(latLngBounds:LatLngBounds)
Don't know if it will work, give it a try...
Found here.
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Seems panTo() is no substitute for setCenter(). I just have to code around my Prime Meridian issue and use setCenter() instead.