I have a geolocation map where the user can select a location from a dropdown, this then adds the location to the map as a marker. However I have just implemented code to update the geolocation of the person if they are moving, on this function update it refreshes the entire map and removes the marker of the location.
Is there a way around this whole map refresh, something like updating just the marker postion without refreshing the whole map or is it simply a case of grabbing the location before refresh then adding it back in afterwards?
This seems wasteful on resources though as it updates every 3 seconds.
Example Google Maps API code would be great as I don't currently have mine to hand to show as example.
Summary: I wish to be able to update the user position marker without refreshing the whole map div as this then removes any previously added markers.
Thanks
I think there is a lot of different way to prevent that. check out the google.maps.Map class and its methods in the API documentation.
Related
I've got google map on my webapp working with the JavaScript API V3. I give my users the ability to create some routes with this features:
the user can create a route.
the user can add waypoints doing click on the map.
the use can modify any waypoint and the markers origin/destination dragging the marker on the map.
the user can save the route.
The problem:
If the user click and dragging some part of the route without use any waypoint, the route change but I can't save it. Because I save the markers origin/destination and the waypoints.
there is any way to lock the route?
Here you can see an example in API documentation
Below I leave an image that you can see how the user drag the black and white circle and change the route (this is that I try to lock).
You need to tap into direction_changed event listener and puckup route points and see which ones you need and which ones you dont.
The other solution is to use non draggable route code and only allow user to click and create a point. Then calculate dustance when you have more than 1 points. Allow user to drag marker only and update route and total distance on drop marker.
If you can create a jsfiddle of what you have done so far it would help us look into it and give you a more accurate answer with working example.
Encountered the same problem today and found out that there's a setting for it. You just need to set the clickable property of polylineOptions to false.
this.directionsRenderer=new google.maps.DirectionsRenderer({draggable:!0,map,panel:this.elements.directionsBody,polylineOptions:{clickable:!1,strokeColor:"#4BAFF8"}})
DirectionsRenderer:
https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions.polylineOptions
PolylineOptions: https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions
I create Bing Maps AJAX control and initialize it with always the same values: lat, lng and zoom level. This is a default aerial map type and a maximum zoom level. And every time I get the following image:
http://i50.tinypic.com/acturr.jpg
There is no documented method (or not) to refresh the current area so I should to do zoom out and zoom in using mouse every time, it's annoying. For Google Maps I found a useful trick:
google.maps.event.trigger(this.map, 'resize');
Does Bing Maps AJAX API have something similar?
I have recently encountered a similar issue on Bing maps AJAX V7:
On some browsers (Mostly on Chrome), if the map is not present on the viewport (you have to scroll to reach it), then it initializes improperly.
I have reported the issue to MSDN but didn't get any useful answer: https://social.msdn.microsoft.com/Forums/en-US/439c33bc-a1ed-4e74-a019-f7fecb809030/scroll-issue-on-chrome-with-ajax-v7-control
To fix this issue, I have used two things:
First of all, I had to find a way to force the Bing map to refresh (didn't found any solution on the internet nor object method to do that). After a lot of tests I came out with a solution:
map.setMapType(Microsoft.Maps.MapTypeId.mercator);
setTimeout(function(){map.setMapType(Microsoft.Maps.MapTypeId.auto);}, 1)
Indeed, changing the viewport to "mercator" then back to another forces the map to refresh (the setTimeout makes the action asynchronous)
I then have added a lib that triggers an event when an element is entering the viewport in order to trigger the force refresh every time the map enters the viewport
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
I am trying to use a navigation menu that connects the links to a marker on google maps. When it is clicked, the map centers itself on the marker that corresponds to the link clicked. I saw this great example, http://www.cannonade.net/geo.php?test=geo20, but was confused by the source code and the fact that it was for a sidebar. I would like my navigation above the map.
With Page Refresh
If you plan on moving to a new page (ie, a profile for a new location) then you simply have to store the LatLng of the marker either in the link or to be pushed to javascript from the server side code.
After that, you can simply create your map as usual with:
map.setCenter(latlng);
Map Reference
Without Page Refresh
If you don't plan on refreshing the page, just moving the map - you can use panTo(latlng) instead.
It might look something like this:
Mexico
I need some inputs on how to show a map (public to all) and allow any user (whose email I should be able to track) to click several points on the map and make appropriate markers (it should just be visible as a point, nothing special). Other users SHOULD see those points as well. I should be able to access data on the backend as to who selected what point.
Any code pointers?
Have a look at this example in the google maps API here to get the basic feel of how to play with markers.
Basically I would bind a mouse click event handler to the gmap, then use this to create a new marker at that position and add it to the map using map.addOverlay(marker).
You will then need some sort of server side script that you can pass the marker information to via an ajax call.