I would like to dedicate ~2/3 of the page width to a Google Map, and ~1/3 to a div that displays information content of an infowindow for the clicked-on marker.
Upon a click on a certain marker, that marker would be highlighted to indicate the marker that the displayed information relates to.
Reason: I have a lot of markers in a close proximity and triggering an infowindow
Question: How could I display information of an infowindow for each marker in that div element, instead of overlaying an infowindow over the map?
UPDATE:
I am using gmaps4rails, and create a bunch of markers using the addMarkers method with the following argument (an array of markers with its own latitude, longitude, etc):
{'lat' => img["coords"]["latitude"].to_s,
lng' => img["coords"]["longitude"].to_s,
'infowindow' => img["imagePath"]+"<br/><a target='_blank' href='../get_image?path=" + img['imagePath']+"'><img style='height: 400px' src='../get_image?path=" + file_path+"'/></a>"}
I get a map with markers that have individual infoboxes (image path + an image).
Related
I am using angular-gm.js. I have created a customized marker and was able to open info window .I am looking for some examples where I can change infowindow to open left , right based on google marker position on either top left or bottom right. For now info window opens on top of marker by default
An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. By default the infowindow will open on the top of the marker(if attached to a marker), but you can use the pixeloffset to move the infowindow in relation to the marker.
from the docs:
"pixelOffset contains an offset from the tip of the info window to the location on which the info window is anchored. In practice, you should not need to specify this field. You can leave it at the default value."
var infowindow = new google.maps.InfoWindow({
content: contentString,
pixelOffset: new google.maps.Size(100,0)
});
The above causes the infowindow to open to the 100 pixels to the right of the marker. For more info on these properties of the infowindow please check out the documentation here:
https://developers.google.com/maps/documentation/javascript/infowindows
I hope this helps!
I wonder is there a way to automatically pop up the infoWindow of a marker provided a coordinate. I want to click a link on the page from which I will get a geolocation, (and this location has already been marked on the map) With this coordinate, the corresponding infoWindow will pop up just like I clicked it on the map. Does anyone have a clue how to do that?
Thanks.
--
Generally, it's like what you can do with Google Maps, if you have multiple locations on the left, you click one, the corresponding marker on the map will pop up an infoWindow.
It's possible, all you need is a reference to the related marker, then you may trigger a click on the marker, and the infoWindow will open.
How to get the reference to the marker depends on your application(the way you create the markers and the links)
Is it possible to both open and infowindow and draw the route between a 'home' marker and the marker clicked?
What I've got is multiple markers on a map with a 'home' marker. I'd like to have the route drawn on the map from this 'home' marker to the marker clicked.
What you want is an event listener on your markers for the click event. Within that, use the DirectionsService to draw your route.
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!
I want to put a map in a web page where users will be able to put interactive marker (location pins) as many as they want. Now, whenever a marker is placed, I want to store that specified marker's lat, long value to be saved in a database that I have in my server (phpmyadmin).
Trying to get started with Google Map Data API. Have seen lots of examples but could not find any where interactive markers can be placed.
I'm going to show you how to do it with v3 of the APi
Create your map... I'll assume you've got this part down.
Add an event listener to the map. This event listener will call a function that will create the marker (in this case add_marker). You can use any event you want, this uses the click event.
google.maps.event.addListener(this.map, 'click', add_marker);
Create the function that adds the marker to the db then the map. This will require some AJAX. You use the event.latLng to get the lat/lng
function add_marker( event ) {
lat = event.latLng.lat;
lng = event.latLng.lng;
// ajax code here that posts the lat/lng to the server
// only call the remaining code to add the marker if it was successful
var marker = new google.maps.Marker({
position: event.latLng,
map: map // put the handle of your map here
});
}