Google Maps Api V3 - Change map div - javascript

I wanted to ask if anyone knows how to move map from one div to another. Why you would ask... let's say i created complex map, with many tools, letting user to add markers, lines, polygones, save the map position, add infowindows and much more. I am using one div to show the map - all objects are downloaded from database, and put on the map. Then when i press the "change map" button, i get the popup (yeah, that's what i want, i don't want new window) and there is the same map, but with tools which let you to edit it. The problem is, i am atm using same div id, and i am afraid there is some conflict, as my tools are working till i wont refresh map. I am afraid that its because the map below popup is still somehow active, and these functions i am using on the popup map, are used on both? And messing things up?
Or is there a way, to close the map completely, lets say i got a div with a map, and after pushing the button, the map disappears/is closed and i see the div it was in?
I've tried messing around with
"mapa = new google.maps.Map(document.getElementById("map_div"), mapOptions);
but i just don't know what to do to make the old div gone/inactive/not used.
using same line, just changing div, will create map in both dives, and all functions are made on second map created, so that not a solution.

Moving a map to another div is simple, it's just a matter of manipulating the DOM tree. See answer to this map cloning question.

Related

hide clustered overlays from map when page loads

I'm using the leaflet styled layer control, marker cluster and marker cluster layer support plugins to create overlays that you check on or off in the layer controls.
Everything is working perfectly, except that I want the map to be blank when the page first loads, and the user can choose which overlays they want to turn on. I've tried the built in methods for the styled layer control for this but they don't work.
Through trial and error I've figured out the issue is this:
var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);
//monday groups
var mFood = L.layerGroup().addTo(markerClusters);
var mDrink = L.layerGroup().addTo(markerClusters);
var mEntertainment= L.layerGroup().addTo(markerClusters);
if I don't add the markerClusterGroup to the map, the overlays do not appear until the user checks them in the layer control. However, this means the markers do not cluster. I feel like the issue could be solved with an if..then.. loop, but I'm not sure how to create this.
For example if an overlay is checked, add the markerClusters to the map. I worry though that wording it like this would mean all overlays are checked/markerClusters appear and I only want the checked overlay to appear, and be clustered if necessary.
As a general rule, your overlays will be on map as soon as you use myOverlay.addTo(map) or addTo(group) where group is itself already on map.
As you figured out, this is exactly what happens if you avoid adding your markerCluters layer support to the map. But then you have issues with your overlays as you describe.
To overcome these issue, look at layer support checkIn method: it "registers" an overlay to be clustered later on, but without adding it right away into the cluster group.
Therefore you still add the layer support group to your map, but you just check in your overlays so that they do not appear now on map, but will appear clustered when user selects them later on.

How to make a Google Map interactive with website content

I have a Google Map that I created in the Google Map Maker with custom markers on it. This map is embedded in my website.
What I'd like to do is set it up in such a way that when a user clicks one of the "pins" on the Google Map, a div becomes visible on the website that provides more detail on that pin. When a user clicks another pin, the previous div goes invisible and the relevant div becomes visible with more detail on that pin etc. I know how to hide and show divs, its just the interaction with the Google Map that I don't fully understand.
I understand this is most likely a job for JavaScript, but I'd love someone to point me in the right direction.
Here's the site in question http://oliwebconz.ipage.com/destinationwaikanae/stay.html
Many thanks in advance!
Ollie
Take a look at this documentation page from Google. It shows you how to execute a function when you click on a marker on the map. In the pages around that page you can find more examples of adding listeners to ready events, map click event, zoom events etc.

Google Maps markers ontop of each other

So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol

Prevent map refresh when marker moves - Google Maps API

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.

Custom InfoWindow size/pointer position in Google Maps API

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.

Categories