HTML5 Geolocation only move marker - html

Hi I am using the code here http://rominirani.com/html5-recipes-more-on-geolocation/ to implement a user tracking app built in HTML5.
The issue I have is that whenever I move, the map completely re-renders. Is there a way to just update the marker position and set the center of the map to that position or is there a better way to implement Google maps with a marker that moves when the user moves?
Thanks

You can combine the HTML5 geolocation API with Google Maps to add/remove a marker on a position change listener
navigator.geolocation.watchPosition
https://google-developers.appspot.com/maps/documentation/javascript/examples/overlay-remove

Related

Showing information on Google Maps API

I'm fairly new to working with Google Maps API. When embedding a map you get the place and a white box in the top right hand corner with a little information on the place. However I want to use the JavaScript API and want to know is there anyway to replicate this with the JavaScript API and not the iframe embed.
Thanks.
Basically to display the information you would need to use the infoWindow, yes. You can attach an infoWindow to either a marker or directly to map co-ordinates. In depth documentation about infoWindow and detailed references can be found here.

How can I display an InfoWindow beyond the edge of a Google Map and not pan the map?

I'm using google maps api v3.
I'm displaying InfoWindow,and we know that unless auto-pan is disabled, an InfoWindow will pan the map to make itself visible when it is opened.
But i want to make the infowindow is fully visible when it opens with out pan the map,like intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Maybe some would suggest smartinfowindow, but there is some problems with smartinfowindow,you can test it.
Is there any other way?
Thank you very much!

Clicking markers on Google Static Maps

I have an application that downloads static images off Google maps, with markers placed where I want them (Placed by passing arguments into the Google Static Maps URL). However, I also need to be able to click the markers. I figured I could convert the x and y coordinate is the click to lon/lat, and then figure out that way which marker was clicked, but I haven't found that too easy.
I know the dimensions of the map in pixels, the zoom level, and the centre point of the map in pixels and lon/lat, so I followed this blog post. Unfortunately this didn't work.
Does anyone know how I could do this, or know another way I could figure out if a marker has been clicked? I'm forced to use the Static maps unfortunately, so I can't do any of it with the JavaScript API
See:
http://home.provide.net/~bratliff/largetiles/
or
http://home.provide.net/~bratliff/harbor/
It is not exactly what you are doing but it does demonstrate Mercator projection conversions & cross-browser mouse events.

Google Maps v3 block map interaction

I am trying to make a Polyline editor, just like the one from Google Drawings Library. (for specific reasons, i can't use that one)
It works on the same principle. Start with a point, then for each click add new points and make the polyline.
On the editor from Google Drawings Library, while you are editing a polyline, you're mouse can't interact with other items from the map.
Inspecting with firebug, i see that they have an overlay of 20000000 z-index inside the map.
Is there any way of creating the same overlay for my map using default Google Maps functions?
It's a custom overlay inside the overlayMouseTarget-pane with the same size as the map and a draw-method that updates the position of the overlay. You may do the same.

Google map API v3 markers overlapping

I am making an application with google maps.
When markers are overlapping only the last one is displayed even if the icons are different..
I do not want it to cluster in that case, rather it should show both maybe by changing the coordinates just a but??
Any solutions??
I think this is a pretty elegant solution, called Spiderfying the markers.
https://github.com/jawj/OverlappingMarkerSpiderfier
I'm thinking of using it.
What I do now is use JavaScript to make a fancy popup that hides and shows divs on one marker location (created problematically in PHP, but you could do it on JS too). It has the side benefit of allowing less markers on the map.
Click a black numbered marker on this map to see it in action.
http://www.yourmapper.com/map/111/crime-reports/crime-in-metro-louisville-ky-since-jan-2003.htm
Another option is to use Google Maps API 3 Utility Library, it has a Marker Clusterer.