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.
Related
I have to show ads on my page and a defaultImage when there is no ads.
googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
.addService(googletag.pubads());
In there a way to record no ads in code in order to show the defaultImage ?
You could use an event listener such as slotRenderEnded (documentation here)
// This listener is called when a slot has finished rendering.
googletag.pubads().addEventListener('slotRenderEnded',
function(event) {
var slot = event.slot;
var isEmpty = event.isEmpty;
if (isEmpty) {
//add your default image
}
}
);
Alternatively, you might be interested in using googletag.content() as detailled here.
I am having trouble customizing the "clicked" infowindows in the google places API. I am able to use the places api to find locations and to customize the searched infoWindows (image 1) but I cannot seem to figure out how to customize the infoWindows launched by the places icons (image 2).
I apologize, part of my problem is I don't know what those specific infoWindows are called and if I did, I might be able to search for the solution. It seems most questions on this site are related to customizing the searched infoWindow content and I have had success doing that.
Searched Customized InfoWindow (image 1)
The InfoWindow that I want to customize and is launched by icons on the map (image 2)
Those are called clickableIcons. From the documentation
clickableIcons | Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.
and:
getClickableIcons() | Return Value: boolean
Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value is true, then the icons are clickable on the map.
To control the InfoWindow, stop the default one from being opened, as described in the IconMouseEvent documentation:
google.maps.IconMouseEvent object specification
This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more about place IDs in the Places API developer guide.
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iw = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(evt) {
evt.stop()
if (evt.placeId) {
console.log(evt.placeId);
iw.setContent(evt.placeId);
iw.setPosition(evt.latLng);
iw.open(map);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>
I already added a map load listener after which i start adding markers to the cluster.
I wanna display a loading screen till the markerclusterer finishes the marker loading.
so how do i do that ?
this is my hide loading screen code which hides on map tiles load.
google.maps.event.addListener(map, 'tilesloaded', function() {
$("#loading").hide();
});
I know it's an old one but for anyone in the same situation I sort of found a solution.
Right after you are creating your cluster
markerCluster = new MarkerClusterer(map,
markers,
{
imagePath:
"/img/m/"
});
Add a listener for 'zoom_changed' like that:
google.maps.event.addListenerOnce(map,
'zoom_changed',
function(event) {
console.log("zoom occured");
});
(The listener once being key here, you don't want it to run every time the user zooms, you don't even need to set a different zoom value, nothing will happen visually)
and then:
map.setZoom(10);
I am using the same value (10) as in my InitMap function, so the user doesn't see any zoom in or outs.
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/
I have found the function below which creates only one marker - which is what I want.
But how do I change the marker options e.g. html - without creating a new one?
i.e. the code below will move an existing marker using setPosition but what if I also want its html and title changed....
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
The html is the content of the infoWindow bound to the marker's 'click' event. There is an infoWindow.setContent() method. I would extend the marker to hold the html content when you create it, then update it where you reset the position, title, etc. Then you need to write you own 'click' event handler to use something against a single global infoWindow.
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(marker.html);
infowindow.open(map,marker);
});
the properties of the marker object mostly have corresponding get and set methods, as detailed in the documentation
For example, Title has a get_Title() method and a set_Title() method, which you can use like this...
myMarker.setTitle('my new title');
Maker is a MVCObject and this class have the set method
marker.set(property, New_Value);
If you want to change more than one property, you can use setOptions method