I'm relativ new to the Google Maps API.
My situation: Website with an fullscreen Google map as background.
First problem: If the user scrolls down, or zooms out too much, there is an gray background. Is it possible to limit the max zoom-out, and that he can't scroll out? Or maybe repeat the map vertical (with markers).
If it's possible to set the max zoom-out and lock him within the map, how could I dynamically calculate the max zoom-out releated to the screen-resolution?
Second problem: Is it possible to add custom javascript to a marker?
Example: I create 5 markers, each one should hold an custom value (ID from the database). On click my own function should be called with the custom value as parameter and do some stuff.
Edit: This is what I mean with grey: (vertical "end" of google maps)
Map object have propert maxZoom, set it when map created
yes it is possible, you can add click events, change popups open, and since it is javascript you can add any additional data just as simple as markr.MyData = 'something interesting'
I am not sure what gray part you mean? I can't see gray parts with max and min zoom in google maps
Okay. Got it finally working! :)
Fixing grey area (handles also zooming):
function setBounds() {
google_allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-85.000, -122.591),
new google.maps.LatLng(85.000, -122.333));
google_lastCenter = google_map.getCenter();
google_lastZoom = google_map.getZoom();
google.maps.event.addListener(google_map, "bounds_changed", function () {
checkBounds();
});
google.maps.event.addListener(google_map, 'center_changed', function () {
checkBounds();
});
}
function checkBounds() {
if (google_allowedBounds.getNorthEast().lat() > google_map.getBounds().getNorthEast().lat()) {
if(google_allowedBounds.getSouthWest().lat() < google_map.getBounds().getSouthWest().lat()) {
google_lastCenter = google_map.getCenter();
google_lastZoom = google_map.getZoom();
return true;
}
}
google_map.panTo(google_lastCenter);
google_map.setZoom(google_lastZoom);
return false;
}
Marker click handler:
google_listener = google.maps.event.addListener(marker, 'click', markerHandler);
function markerHandler(event) {
window.console.log(this);
}
Related
I have a leaflet map that is populated with markers when GPS devices POST their lat and long on random intervals.
The issue is I have to manually drag the map to follow the marker as it receives updates and moves around the map.
Hours later and much research effort:
I implemented a half solution using a button which snaps to the markers current position, but again I have to click the button every time it moves to keep the marker in sight.
onclick="mymap.fitBounds(gotomarker1.getBounds());"
Is there a way I could click the marker itself which will then keep the marker in the center of the map as it receives lat and log updates and moves around? *ideally not a button as there could be many markers and I wouldn't want a page full of buttons.
I have tried applying an on.click function that loops the gotomarker1 code above but I cant stop it once its started, this is an issue as there is more than one marker that I may want to follow or not follow (to clarify I only want to follow one marker at a time).
the way i have solved a similar problem is to store the marker that is being followed into a variable
onclick="selectedMarker = myMarker"
Whenever you receive location updates simply focus the map on the selectedMarker
// update all locations
// ...
// focus selected marker
mymap.fitBounds(selectedMarker.getBounds());
#Nejc Jaminiks logic in his answer helped me work out what I needed to do.
When a marker is created I have this code appended to the marker in real time:
.on('click', focus);
I then have a function to detect when the marker is clicked and loop through setting the view to the marker until the marker (or another marker) is clicked then it will stop following it.
var focusenabled = true;
interval = null;
function focus(e) {
if (focusenabled) {
var i = 0;
interval = setInterval(function () {
mymap.setView(e.target.getLatLng());
console.log("focus active");
}, 2000);
focusenabled = false;
document.getElementById("footer").style.backgroundColor='red';
document.getElementById("footer").style.color='white';
} else {
clearInterval(interval);
document.getElementById("footer").style.backgroundColor='#222';
document.getElementById("footer").style.color='#222';
focusenabled = true;
}
};
I use the code below to change the footer div to red and text to white when a marker is being followed:
document.getElementById("footer").style.backgroundColor='red';
document.getElementById("footer").style.color='white';
And then when a marker is not being followed the footer div returns to the background color which effectivley hides it :)
document.getElementById("footer").style.backgroundColor='#222';
document.getElementById("footer").style.color='#222';
At the moment I have my map set up to cluster icons upon zooming out. I want to disable the ability to select clusters but allow the user to select individual markers if they zoom in. Preferably, clicking on a cluster should select each individual feature in the cluster (in their correct locations). My select code is like so:
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
style: selectedMarkerStyle,
addCondition: function(mapBrowserEvent){
var features = null;
map.forEachFeatureAtPixel(mapBrowserEvent.pixel, function (feature_, layer) {
features = feature_.values_.features;
});
if(features !== null && features.length > 1){
return false;
}
return true;
}
});
map.addInteraction(selectClick);
I tried to make the addCondition check if multiple features are located at the point and then stop the event however it doesn't seem to be working. At the moment clicking on a cluster selects one of the features in the cluster, in the location of the cluster, rather than the features correct location. Is there anyway to fix this?
Thanks
I insert markers from an array by using a loop and I also include button which zooms to a particular marker. So far so good.
JSFiddle
Now I'd like to animate the marker which I zoom to for 3 seconds. I know I should use the function
marker.setAnimation(google.maps.Animation.BOUNCE);
but I can't figure out how to bind the action to a particular marker. Any help appreciated.
You should keep a reference to the marker objects you create.
var marker_refs = [];
function initialize() {
...
for(...) {
marker_refs[i] = new google.maps.Marker(...);
...
}
I updated your fiddle: http://jsfiddle.net/na9Ha/2/
I am developing an application which uses google maps api v3 to show markers and infowindows.
Well, I have N markers stored within an array and a global infowindow used to show some information.
The infowindow contents are shown simply by clicking a marker, created in this way:
/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];
/* create marker function */
function addMarker(p_infowindow_contents)
{
var l_marker = new google.maps.Marker( all the stuff needed );
google.maps.event.addListener(l_marker, 'click', function()
{
g_current_popup.close(); // if already open, it must be closed and reloaded
g_current_popup.setContent(p_infowindow_contents);
g_current_popup.open(g_map, l_marker);
});
g_markers.push(l_marker);
}
Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.
Look at this screenshot took just before the tip disappears:
Does anyone experienced something like this?
Could it be some CSS issue?
Thanks
It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.
I use Mapbox for a dynamic map on a website. It works really well except, I have a sidebar which list the pins with a little more description and an image. I want to make it so when I click on that sidebar, it would fire the click event of that marker on the map.
I used to do this all the time with Google Maps but now I'm stuck because even in the case that I can keep the instance of the marker, I cannot fire the click on it for some reason. It simply does nothing (maybe I need to re-bind the click event on it but I don't know how with mapbox)
I've encountered a few questions about this on Google and SO but none bring a real answer to that question except "keep the instance" which isn't always possible in some cases.
So basically I have a jQuery click event like this:
var marker = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
properties: {}
};
if (isPin) {
marker.properties = pinStyles.pin;
} else if (isWinery) {
marker.properties = pinStyles.winery;
} else {
marker.properties = pinStyles.user;
}
marker.properties.title = locationName;
marker.properties.description = pin.description;
var markerObject = L.mapbox.markerLayer(marker);
// Add to cluster
markers.addLayer(markerObject);
$('#marker_list a.marker_item:last').click(function() {
var geoJson = markerObject.getGeoJSON();
markerObject.fire('click'); // does nothing (openPopup makes "Uncaught TypeError: Object [object Object] has no method 'openPopup' " so I guess I'm not doing it right)
});
And I have this (click event for mapbox marker):
map.markerLayer.on('click', function(e) {
map.setView(e.layer.getLatLng(), map.getZoom());
});
Anyone has an idea about wether 1) fix the non-firing event OR 2) make an HTML link fire a mapbox marker click event OR .openPopup?
Thanks and have a nice day!
MapBox's marker layer is a collection of Leaflet markers. You can create an href to a function that look for a particular marker based on it's layer id.
map.markerLayer.getLayers() returns an array of layer objects that contain both a _leaflet_id and the method togglePopup.
Try matching your href call to the leaflet id and then fire map.markerLayer.getLayers()[i].togglePopup()
Let me know if this helps.