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
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'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
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
);
...
Let say i wanna make a new place in my app (based-on google map API v3). Whenever click on "add new place" button, a marker appears in my current location on the map. And when I click on the marker or drag it to somewhere that I wanna put my place, an infowindow bound with this marker appears so that i can input data.
But each time I click or drag my marker, all my text I've input into my infowindow before was lost. Someone can tell me the way to prevent data loss when drag or click on marker many times?
Here is my code to listen for clicking or dragend
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function() {
infowindow.open(map, marker);
});
Thanks
p/s: my English isnt very good
In your maker click function you should check if the infowindow is already open and if it is then don't open it again.
I have a map with a bunch of markers, and a table of data that corresponds to each marker. When the user clicks on an item in the table, the InfoWindow for the corresponding marker is opened. Everything works fine when the map is zoomed out and the markers are all visible, but if the map is zoomed in, and an InfoWindow for an off-screen marker is opened by clicking the item in the table, here is what happens:
The map scrolls to the correct location, where the InfoWindow already appears open
The map stops panning, and the InfoWindow disappears.
Any suggestions as to what might be going on and how to solve this?
Alright, the issue related to the fact that I was using the Marker Clusterer on the map... essentially, the following was happening:
Click item in table, InfoWindow opens
Map gets panned to the location to display the InfoWindow
When panning is complete, the Marker Clusterer was then re-drawing (if needed), and forcing the InfoWindow closed.
My solution was that when an item in the table is clicked, I get the corresponding Marker's latlng, manually pan to this location, wait for the panning to complete via the 'idle' listener, and when complete (and the Clusterer has done it's re-draw), THEN I open the InfoWindow.
// get map, marker positions
var mapLatLng = GLOBAL_map.getCenter();
var markerLatLng = GLOBAL_markers[index].getPosition();
// pan the map
if(!markerLatLng.equals(mapLatLng)) {
// map will need to pan
GLOBAL_map.panTo(markerLatLng);
google.maps.event.addListenerOnce(GLOBAL_map, 'idle', function() {
// open InfoWindow
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
});
} else {
// map won't be panning, which wouldn't trigger 'idle' listener
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
}
This drove me crazy. My solution is simpler, though. I just set a timer so I don't refresh the map within one second after a pin is clicked.
start with the global:
// global timer variable
var clickTime = Date.now() - 1001;
then define you marker click like:
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
clickTime = Date.now();
});
then set up your idle like:
google.maps.event.addListener(map, 'idle', function () {
if (Date.now() > (clickTime + 1000))
updateMap();
});
Don't use idle event. Use dragend and zoom_changed events from the API spec instead which will allow you to open your infoBoxes without refreshing the map.
google.maps.event.addListener(map, 'dragend', function() {
getMarkers();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
getMarkers();
});