I'm creating a game based on google maps api v3 where the player has to guess some areas, by clicking on the right area on the map. But when I'm creating an invisible overlay the mouse cursor still changes from the open hand to the pointing hand, but it shouldn't change.
Is there a possibility to set the mouse cursor for overlays?
THX
This worked for me
...
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35,25),
new google.maps.LatLng(42,45)
);
var overlayOpts = {
clickable: false
}
historicalOverlay2 = new google.maps.GroundOverlay(
'image.png',
imageBounds,
overlayOpts
);
...
Related
User clicks on the marker on a google map on a flutter app on an android device
As expected infowindow appears
User clicks on infowindow, nothing happens
It was expected to see Title and Snipped updated
I tried with multiple versions and codes.
mapController.onInfoWindowTapped.add((marker) {
_launchURL(data[i]["urlmember"]);
// options
print(marker.id.toString());
print(data[i]["urlmember"]);
MarkerOptions( infoWindowText: InfoWindowText("counseling","find us on second service"));
);
The expected result is for the infowindow to display the new title and snipped
The below code snippet is in the example app in the Flutter Google Maps Package (https://pub.dartlang.org/packages/google_maps_flutter) in the file 'place_marker.dart':
void _updateSelectedMarker(MarkerOptions changes) {
controller.updateMarker(_selectedMarker, changes);
}
void _onMarkerTapped(Marker marker) {
if (_selectedMarker != null) {
_updateSelectedMarker(
const MarkerOptions(icon: BitmapDescriptor.defaultMarker),
);
}
setState(() {
_selectedMarker = marker;
});
_updateSelectedMarker(
MarkerOptions(
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueGreen,
),
),
);
}
I believe that the way you have it set up currently, you click on an info window associated with an pre-existing marker, and that triggers the creation of another marker with no "position" (ie; a LatLng value, which is required for marker objects), but has infoWindow text properties. This would explain why nothing happens when you click on the infoWindow; it's essentially creating a marker and placing it nowhere; which means there wouldn't be anywhere to display the corresponding infoWindow text either.
I believe the logic you are looking to implement is: when a user clicks on the infoWindow, it should trigger an update to the already existing marker. To achieve this, you may implement something similar as the code snippet I shared above, except for using onInfoWindowTapped instead of onMarkerTapped.
i create da google map with multiple InfoWindow.
if i update infoWindow content, it's create new one.
so map always have new window
see image:map infoWindow screenshot
code:
update()
update(){
markers[i].infoWindow = contents;
infoWindow.setContent(markers[i].infoWindow);
infoWindow.open( map, markers[i] );
}
I use time and call update function.
allways it gives new infoWindow
please help
Is there any way to allow the marker's title to be displayed on a mobile device?
For example:
var marker = new google.maps.Marker({map: map,position: position,title: 'My title'});
I simply want the title to be displayed on a mobile device (I tested with iOS) when the user taps on the marker (which should be interpreted as a mouseover, right?).
Thanks a lot.
The title option is used for when you hover your mouse over the marker on the desktop.
If you want to show the name then you can try binding a click even to the marker:
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('some_element').textContent = marker.getTitle();
});
Or you could also try using an infoWindow
My site consists of a Leaflet map with the leaflet.markerclusters plugin. I am also using Flowplayer to play a video that opens in a JQuery Tools overlay using the selector id "#video1".
Currently, when I click on any marker on the map it fires my test video in an overlay. My goal is to create a click event unique to each individual marker in the cluster. Eventually, I would like every marker to have a click event that fires a video unique to that marker.
I am a beginner, and have been doing okay using these well documented libraries up until now. However, I don't have the skills to bridge this current gap. Would someone please give me a push in the right direction? Below is a link to my JS Fiddle. My issue begins on JavaScript line 2098.
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
Thank you,
Joey
http://jsfiddle.net/Joey84/nM458/26/
You are headed in the right direction with the markers.on("click"... function. You just need to make a few edits. Just as you added the event listener to the entire "markers" layer, you can add it to individual markers in your for loop.
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
Likewise - and probably the better solution - you can access details about the marker you clicked in the on("click"... you are currently using by passing a variable to the function. This would be useful if you have multiple videos and don't want to check with an if statement when creating markers.
markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
Note that I used toLowerCase() because your data has the title capitalized and the video id is all lowercase.
Here it is in action:
http://jsfiddle.net/nM458/44/
How i can remember in older versions of Gmaps API was it possible, to make a custom Overlay for adding a Markers on it and than add or remove from main map. Also it was possible to make different groups of results and show/hide it in only one command. In the new reference i can not find it, did they have rename it?
You're talking about a GLayer - https://developers.google.com/maps/documentation/javascript/v2/reference#GLayer
It has, in fact, been removed from the v3 API.
In API v3, it's been left up to the developer to keep track of their overlays and add/remove them from the map as they wish.
The best way to do this is keep your overlays in an array (or an object) and loop through them.
For example, if you had two distinct sets of overlays (infoWindows and markers), you could do something like this:
var overlays = {
markers : [],
infoWindows : []
};
//create a marker and put it in markers
var marker = new google.maps.Marker();
overlays.markers.push(marker);
//create an infoWindow and put it in infoWindows
var infoWindow = new google.maps.InfoWindow();
overlays.infoWindows.push(infoWindow);
//remove all infoWindows from the map
for(var i=0;i<overlays.infoWindows.length;i++) {
overlays.infoWindows[i].setMap(null);
}
//remove all markers from the map
for(var i=0;i<overlays.markers.length;i++) {
overlays.markers[i].setMap(null);
}
It's a simplistic example, but hopefully you get the idea: that adding, managing, and removing "groups" of overlays in v3 is left up to the developer.