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
Related
I'm creating an ios app to scout locations "on the go" and mark the locations one by one by clicking a button, and dropping a marker based on current location. I then want to be able to connect the dots, as it were, and create a trail that traverses them all.
I can drop a marker at my location, and I can tap a bunch of markers onto the map, but I'm having trouble bridging the two. Any tips?
Looks like Polylines are just the thing you're looking for. Though, its best for you to save the coordinates in order for you to properly set the trail.
I'm new to javascript and no idea where to start digging information how to implement my idea. I want to open a div like a pop-up over the map when a marker is clicked. I have around 15 markers and every marker has different content and images. The pop-up layout will stay the same. I believe making a div is easier than making a infobox, true?
this is my photoshop sketch:
Sketch
And this is what I have so far:
Demo
What should I try, read and investigate?
You could just use the info window of google maps
see https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
and customize it's contents.
like in this question: Google Maps API v3: Custom styles for infowindow
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.
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 need to do something like this one picture.where if i drag it any map other map will automatically dragging.and that downtown map should be inside that mobile frame. And this two map images are in different divider
I don't know is it working on different types of maps, but you can easly do it with google maps. You can just link one div to another and pass vanishing point. Size of the map is included in link to google map, so that will be easy to change ;)