I have this page where I have a listing of items per state. If I try to do
map.fitBounds(bounds);
Then the map suddenly shifts to the ocean. What I wanted it to do was to fit around the area of the markers.
Here is the test page for this:
http://www.comehike.com/outdoors/terrain.php?type=hills&geo=state&state_id=1
Any idea what is going wrong?
Thanks!
When you initialize bounds at the end of initializeTerrain there are no markers on the map. Therefore it defaults to that spot in the Pacific when you later call map.fitBounds(bounds). You need to extend the bounds after each of the markers are added.
var myLatlng = new google.maps.LatLng( 32.533470 , -87.786118 );
bound.extend(myLatlng);
...repeat for each marker.
should do the trick
that location is the center of the map, probably meaning that the location wasn't found. Maybe an incorrect syntax somewhere?
Related
I have a map that has markers programmatically placed on it based on values in my database. When you click on a marker, it will go to a detail page for that location.
My problem is that when the map is sufficiently zoomed out, markers that are close enough to each other appear as a single marker, in effect hiding some of the markers. Is there a way to tell programmatically whether a marker is part of a group of markers or is hidden/covered up by other markers?
My intention is to do something like this for each dynamically generated marker:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
I have checked the Marker API documentation, but can't seem to find any useful methods. getClickable and getVisible always return true in my case, regardless of whether a marker is covered by another marker. Any suggestions? Thank you!
I ended up going with MarkerClusterer to solve my problem. I was hoping for a simpler solution, but this turned out to be pretty simple after all.
The only thing I needed to add to my existing marker-generating code was a list: var markers = [];, and then I called markers.push(marker); on all of my markers. The final step was to create a new MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers, options);
And MarkerClusterer handles the rest more or less (the options parameter is optional, but I used it to set the path to my images and set the maximum zoom level). Now, in the situations where previously my markers were stacked on top of each other, making it impossible to see or click certain markers at certain zoom levels, I instead see a cluster with a number indicating the number of markers in that cluster. Clicking the cluster icon will further zoom in, revealing my markers.
All of this was done following the simple usage example on their github page, but they have pretty good documentation too. Most of my time getting this to work right was actually spent styling the cluster icons to match my site's color scheme...
I am working with markers and adding them like this:
markerLatLang = new google.maps.LatLng(35.6412142,139.6988337);
marker = new google.maps.Marker({position: markerLatLang, map: map});
When I go in to street view all the markers are at ground level. Is there a way to position a marker at x meters above ground or at a set altitude?
Unfortunately, as Dr.Molle said, this option doesn't exist in Google Maps API for now.
I have done this using a PNG image having bottom empty space how much you want. I also did not find a proper way to do that but this trick may be helpful to you.
I am trying to create a location based search application. I need to display search results using marker. By using the Marker code sample from google map javascript API, the marker is displayed at the center of the map div. I need to point the marker at the bottom of the map so that i can show the search result above the marker.
Check this url http://www.groupon.com/now#/categories?address=denver&hint=47.5615%2C-52.7127&lat=39.7391536&lng=-104.9847034 . It shows marker to the bottom if the map. I need to disply like this.
Placing the marker doesn't force the map to center on it - the map itself is being set so its centerpoint is the same as the marker. You need to set the center of the map to be 'above' (in latitude) the center of the marker. use .setCenter(LatLng) on the map object.
Google map API has function to set the center point of view. If you don't provide it centers the marker lat/long you provide. You need to add/subtract lat/long accordingly to set center position. From this I mean you should take the current lat/long of the marker in separate variables, add/subtract values to adjust centre point and set the map center point with those.
Hope this help. :)
Based on the reply from Oliver (thanks), here is what i did to solve this issue.
In https://developers.google.com/maps/documentation/javascript/reference we see that we have to add map.setCenter({lat: -34, lng: 151}); - i have place it after this line var myLatlng = new google.maps.LatLng(your latitude, your longitude);
To get the values i have opened the google map and i clicked on my area, the pointer shows at the bottom of the page and i see the latitude and longitude (we need them for the line var myLatlng = new google.maps.LatLng(your latitude, your longitude); ).
Than i dragged the map down and clicked again in the middle of the map to see the latit. and longit. of that area and these two will be added in the line that you have to add - map.setCenter({lat: new latitude value, lng: new longitude value});
I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil
In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra
I am looking for javascript code that display marker on top of others.
May be there is any method of GMarker that set marker on top (z-index kind of).
For solution, I destroy marker and created again. The solution works before some time (when I tried this solution) but not right now.
There is a parameter zIndexProcess.
var marker = new GMarker( latlng, { zIndexProcess: "your z index for marker" } );
Should work.
Check this link as well.
http://econym.org.uk/gmap/zindex.htm