I tried following https://v6.gmap3.net/en/catalog/10-overlays/marker-41 but infowindow not working how should i do
$('.map-object').gmap3({
map: {
options: {
center:[46.578498,2.457275],
zoom: 5
}
},
marker:{
values:[
{latLng:[48.8620722, 2.352047], data:"Paris !"},
],
options:{
draggable: false
},
events:{
mouseover: function(marker, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
},
mouseout: function(){
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
}
}
}
}
});
There is a marker in France but the infowindow does not come out when I hover over it.
Thanks for the help.
Related
I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.
this is what I tried:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
},
datalabels: {
events: {
click: function(e) {
const url = e.target.point.value;
window.open(url);
}
}
}
}
},
Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.
Use the this.value instead of e.target.point.value:
plotOptions: {
series: {
point: {
events: {
click: function() {
const url = this.value;
window.open(url);
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6gpL57nf/
In your example, you could use:
e.point.properties.hasc
For get the value from the clicked point.
Code:
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
click: function(e) {
const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
window.open(url);
}
}
},
}
},
You can check other values using this path:
console.log(e.point.properties);
The full code is in this forked jsfiddle
I am using highchart contextmenu (using: https://blacklabel.github.io/custom_events/js/customEvents.js) and drill down and drill up.
Problem:
When I right click on pie chart we are able to call alert which is in contextmenu. At the same time, when I drill down and drill up then right click on pie chart, contextmenu is not working. In plotoption it's working fine but I do not need it in plotoption.
Code:
chart: {
type: 'pie',
events: {
drillup: function () {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
console.log('drillup',chart.series[0].events);
if (!chart.plotOptions){
chart.plotOptions = {};
}
if (!chart.plotOptions.series) {
chart.plotOptions.series = {};
}
if (!chart.plotOptions.series.events) {
chart.plotOptions.series['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
/*
plotOptions: {
series: {
events: {
contextmenu: function () {
alert('hi33')
}
},
}
},
*/
console.log('drillup222',chart);
}, 100);
},
drilldown: function (e) {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
if (!chart.series[0].events) {
chart.series[0]['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
console.log('drilldown',chart.series[0]);
}, 100);
}
}
},
https://jsfiddle.net/k14ajzpo/2/
https://jsfiddle.net/0txqk2cn/1/
The workaround for this issue is to add an event to plotOptions and check if event occurred on main series. Check demo and code posted below.
Code:
chart: {
type: 'pie',
events: {
load: function () {
var chart = this;
chart.series[0].customEventsEnabled = true;
}
}
},
plotOptions: {
series: {
events: {
contextmenu: function() {
var series = this;
if (series.customEventsEnabled || series.drilldownLevel) {
console.log('working');
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/0pLqvmky/
I have used gmaps4rails before with success but this time i have a need that i cant figure out how to do it.
I have my builder working and generating my map_info partials, also, i am able to open every infowindow from markers by clicking inside the map.
What i need is to call the infowindow of a marker from a list. (onclick event inside a div for instance)
builder inside controller
#gmaps_markers = Gmaps4rails.build_markers(#partners) do |partner, marker|
marker.lat partner.latitude
marker.lng partner.longitude
marker.title partner.company
marker.json({:id => partner.id })
marker.infowindow render_to_string(partial: 'pages/partials/subscribe/map_info', locals: { partner: partner })
end
javascript markers + maps generator
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
}
);
Let me know if you need more details!
Thanks
The easiest option is to trigger the click event on the marker:
function openMarkerInfo(id) {
$.each(markers, function(index, marker) {
if (marker.id == id) {
google.maps.event.trigger(marker.getServiceObject(), 'click')
}
});
};
See working plunk here
You need to add id to marker
Change your map and markers generation js to
Gmaps.store = {}
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
Gmaps.store.markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(Gmaps.store.markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
});
Then write js function
Gmaps.openMarkerInfo = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
var infowindow = this.infowindow;
infowindow.open(Gmaps.map.map, marker.serviceObject);
}
});
}
Then add it to onclick of your list element
Gmaps.openMarkerInfo(1);
i found a solution. Take a look...
Javascript onclick function
openInfoWindow = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
google.maps.event.trigger(this.getServiceObject(), 'click')
}
});
}
Javascript maps + markers generator
Gmaps.store = {}
Gmaps.store.handler = Gmaps.build('Google',
{
markers: {
clusterer: {
gridSize: 10, maxZoom:15
}
}
});
Gmaps.store.handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function(){
markers = #{raw #gmaps_markers.to_json};
Gmaps.store.markers = markers.map(function(m) {
marker = Gmaps.store.handler.addMarker(m);
marker.serviceObject.set('id', m.id);
return marker;
});
Gmaps.store.handler.bounds.extendWith(Gmaps.store.markers);
Gmaps.store.handler.fitMapToBounds();
}
);
And then, call onclick event.
openInfoWindow(id);
Working and no bugs so far...
:)
What i want is when user do mouseover (hover) then the icon change. My code is below:
handler = Gmaps.build("Google", {
markers: {
maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
json.marker = markers[index];
$(".location-" + json.id).on("mouseover", function() {
json.picture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 36,
height: 36
};
json.marker.setMap(handler.getMap());
json.marker.panTo();
handler.removeMarker(json.marker);
handler.addMarker(json);
}).on("mouseout", function() {
json.picture = '';
handler.removeMarker(json.marker);
handler.addMarker(json);
});
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
Using this code, the color of the marker can change from red to green. However, when the user remove their mouse from the hover area, the color does not change back to the original color. Please can anyone suggest me on this issue?
Thanks
Hai thank for #apneadiving answer. I modify my code to this
hoverPicture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 33,
height: 33
};
handler = Gmaps.build("Google", {
markers: {
maxRandomDistance: null
}
});
handler.buildMap({
provider: {},
internal: {
id: "map-canvas"
}
}, function() {
var markers;
markers = handler.addMarkers(ar);
_.each(ar, function(json, index) {
var gr;
json.marker = markers[index];
gr = {};
gr.marker = void 0;
$(".location-" + json.id).on("mouseover", function() {
gr = {
lat: json.lat,
lng: json.lng,
picture: hoverPicture
};
json.marker.panTo();
handler.removeMarker(json.marker);
gr.marker = handler.addMarker(gr);
}).on("mouseout", function() {
handler.removeMarker(gr.marker);
json.marker = handler.addMarker(json);
});
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
So the new icon need to insert to variable after addMarker
Try something like:
_.each(ar, function(json, index) {
var json.marker = markers[index];
var initialPicture = json.picture;
var hoverPicture = {
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
width: 36,
height: 36
}
$(".location-" + json.id).on("mouseover", function() {
json.picture = hoverPicture;
json.marker.setMap(handler.getMap());
json.marker.panTo();
handler.removeMarker(json.marker);
handler.addMarker(json);
}).on("mouseout", function() {
json.picture = initialPicture;
handler.removeMarker(json.marker);
var newMarker = handler.addMarker(json);
json.marker = newMarker;
});
});
i want to make the markers clustered with markerClusterer but i cannot get the map instance with jquery ui map . js
tried:
var map = $('#map_canvas').gmap('getMap');
or
var map = $('map_canvas').gmap('get', 'map');
and after:
var markerCluster = new MarkerClusterer(map, allMarkers);
but with errors
Thank you
Tried this . No Errors but no clusters...
$('#map_canvas').gmap({ 'callback': function () {
var self = this;
$.getJSON('Data/markers.json', function (data) {
$.each(data.markers, function (i, marker) {
self.addMarker({ 'position': new google.maps.LatLng(marker.latitude,marker.longitude)}).click(function () {
$.ajax({
type: "GET",
url: "/LocoMap/LocoMap/InfoMobilePartialView/",
data: { latitude: marker.latitude, longitude: marker.longitude},
success: function (data) {
$("#marker-info").remove();
$(document.body).append("<div id='marker-info' data-role ='page'> </div>");
var $contentDiv = $("#marker-info");
$contentDiv.html(data).trigger('create');
$.mobile.changePage("#marker-info", { changeHash: false, type: "get", transition: 'pop',rel:"external" });
},
error: function (errorData) { onError(errorData); }
});
});
});
});
self.set('MarkerClusterer', new MarkerClusterer(this.get('map'), this.get('markers')));
}});
$('#map_canvas').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) {
$.getJSON( 'Data/markers.json', function(data) {
$.each( data.markers, function(i, m)
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(m.latitude, m.longitude), 'bounds':true } );
});
});
$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map,$(this).gmap('get', 'markers')));
});
with no errors and no clusters
it seems **$(this).gmap('get', 'markers')));** returns Array[0]