I want to trigger the map info window from an outside link. For example, we add country link on the map sidebar and want to open the info window from the country list link.
http://projects.thesparxitsolutions.com/SIS415/business-world-map
You can open multiple description windows setting allowMultipleDescriptionWindows to true in your config and then calling clickMapObject on the desired areas to open them programmatically, for example:
AmCharts.makeChart("mapdiv", {
// ...
allowMultipleDescriptionWindows: true,
listeners: [
{
event: "rendered",
method: function(e) {
var map = e.chart;
//trigger the description windows for these regions
map.clickMapObject(map.getObjectById("FR-D"));
map.clickMapObject(map.getObjectById("FR-E"));
}
}
]
});
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've got a bunch of charts showing on a single page via the HighCharts cloud inject code. Because the data for each chart is quite large, the page gets massive if the user selects View data table from the menu - which I'm fine with, but I would prefer the user be able to Toggle the table triggered by the same menu button. Is there any way I could do this via the custom code?
I've figure dout how to change the text in the menu to Toggle data table, but can't figure out how to apply the toggle code.
This is what I have so far:
exporting: {
buttons: {
contextButton: {
enabled: true,
text: 'Download',
menuItems: ["printChart",
"separator",
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"downloadSVG",
"separator",
"downloadCSV",
"downloadXLS",
{
textKey: 'viewData',
text: 'Toggle data table',
onclick: function() {
this.viewData()
}
}]
}
}
It seems that Highcharts doesn’t offer any method for hiding the data table. The workaround is to put the following logic in onclick event:
onclick: function() {
if (this.dataTableDiv && this.dataTableDiv.style.display !== 'none') {
this.dataTableDiv.style.display = 'none';
} else {
this.viewData();
this.dataTableDiv.style.display = '';
}
}
Live demo: http://jsfiddle.net/BlackLabel/2t1w4pu9/
Cloud doesn’t include export-data module in its editor but the generated inject-script does. So the functionality works outside the Cloud (e.g. on jsfiddle).
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 need to handle the case when a user clicks on a mapTypeControl differently than when it's set through map.setMapTypeId(). How do I listen for clicks on map type controls?
You can't listen for events on the default UI control set. But if you are strictly focused on differentiating between clicks on the mapTypeControl and map.setMapTypeId(), you could use the fact that you control the code that may call setMapTypeId() and add some state management code:
// First, add a new state var:
var typeIdChangedInCode = false;
// Then, anywhere in your code where you call setMapTypeId(), add this:
typeIdChangedInCode = true;
map.setMapTypeId( newTypeId );
// Finally, include state checking code in the map event listener:
google.maps.event.addListener( map, "maptypeid_changed", function( evnt ) {
if ( typeIdChangedInCode ) {
//handle the scenario in the non-click way, but REMEMBER TO:
typeIdChangedInCode = false;
}
else {
//handle the scenario in the map click way
}
});
This should set you up to handle the two different occurrences in the way you need.
google.maps.event.addListener(map, 'maptypeid_changed', function(e){
alert(map.getMapTypeId());
});
this has been baking my noodle for months, I'll be honest, I am a designer not a programmer so this type of scripting is a bit harder than the average jquery/javascript that I'm used too.
I can't find any basic documentation on how to implement it, apart from this but it's not massively intuitive - http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html
I've tried making a JSfiddle, but I can't even get it to work (now working thanks to Tsar)
I've built a jQuery mobile app and I'm desperate to get the geo-location functionality working with fusion table markers (from my fusion table) and to be allowed to click on the fusion table markers to reveal a info window. This info window will be constructed in fusion tables.
I need the geo-location to center the map on the devices current location - if the geo-location is not available or denied by device user, then the map needs to be centered on these co-ordinates 52.450939, -1.721002.
What would be the next level is to have the the jQuery mobile UI pop-up window but this is not critical, just the standard bubble on the map is fine.
A updated JSFiddle... http://jsfiddle.net/twGHC/30/
My fusion table number is: 1260763
Default location is: (only if Geo location is not available) 52.450939, -1.721002
Zoom level: 13
Any advice would be awesome, please feel free to JSfiddle it. Thanks in advance.
Here's a working solution, which detects user's location, drops a marker on it and plots the map with your Fusion Markers. As per Google Maps v3 API documentation:
$(function() {
var position = new google.maps.LatLng(52.450939, -1.721002);
getCurrentPosition = function(callback) {
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
callback(position);
}, callback(position));
} // Try Google Gears Geolocation
else if (google.gears) {
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.latitude,pos.longitude);
callback(position);
}, callback(position));
} // Browser doesn't support Geolocation
else {
// Drop the user off in Coventry =)
callback(position);
}
};
// call the above function
getCurrentPosition(InitMap);
});
function InitMap(pos) {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: pos,
zoom: 14,
mapTypeId: 'roadmap'
});
var marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
map: map,
title: "You are here, mate!"
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Geocodable address',
from: '1260763'
},
});
layer.setMap(map);
};
When user denies tracking of his location, exception is caught in getCurrentPosition, however, 2nd optional parameter in this function is an exception handler, so what I did is simply passed in callback(position) so that default location sets on the map. If you don't want to do it, move out the map initializer code from InitMap into separate function and call it instead, when exceptions are caught, to display a blank map.
See it in action here: http://jsfiddle.net/twGHC/36/
P.S. In case your next question is "how to add a balloon pop-up on marker click", here's what you need to do.
Here is how to do it with jquery-ui-map:
http://jsfiddle.net/rweCf/1/
http://jsfiddle.net/rweCf/1/embedded/result/
If you just want to change within a certain radius of the client position this is how you would do it
http://jsfiddle.net/Ywknf/1/ (client location is the initial point so everyone can see the results)
Here is the code if the url isnt working or the trunk code changed
$(function() {
$('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) {
$('#map_canvas').gmap('getCurrentPosition', function(results, status) {
if ( status === 'OK' ) {
var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
var marker = $('#map_canvas').gmap('get', 'markers > client' );
if ( !marker ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
} else {
marker.setPosition(position);
map.panTo(position);
}
} else if ( status === 'NOT_SUPPORTED' ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
}
});
$('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
});
});