I would like to change the marker icon, when the user hovers his mouse over a div tag. I found a close solution, where the marker icon changes when the user hovers his mouse over the marker itself. But I would like to change it using div tags.
The code:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
My set up shall look like this:
<div class="sth" onmouseover="ShowMarker(id)" />
And my JS sth like:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
icon: icon1,
title: "some marker"
});
function ShowMarker(id) {
google.maps.event.addListener(marker, 'mouseover', function() {
marker[id].setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker[id].setIcon(icon1);
});
}
This code should change only the selected marker by id.
Could anyone change my code to a working one?
I would really appreciate it.
Thanks in advance.
You have to make a listener on the div you want :
<div class="sth" onmouseover="hover(1)" onmouseout="out(1)">MARKER 1</div>
<div class="sth" onmouseover="hover(2)" onmouseout="out(2)">MARKER 2</div>
Then push your markers in another variable, and loop on it :
var allMarkers = [];
var marker = new ...();
allMarkers.push(marker);
function hover(id) {
for ( var i = 0; i< allMarkers.length; i++) {
if (id === allMarkers[i].id) {
allMarkers[i].setIcon(icon2);
break;
}
}
}
...
I've done a demo, with comments. Hope it helps :)
Related
I need your help to add event clic into tab infobubble. This event should show an alert by clicking on the tab tab 1. The problem starts when I can not create an id on the tab
http://jsfiddle.net/hT8Kw/11/
map_initialize(); // load map
function map_initialize(){
var mapOptions = {
center: new google.maps.LatLng(37.286172, -121.80929),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'A Customized InfoWindow Marker'
});
var infoBubble = new InfoBubble({
maxWidth: 300
});
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('Tab 1', div);
infoBubble.addTab('Tab 2', "1234");
//Add event clic into Tab 1. If click in Tab 1 show alert.
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
}
I added the id to tab 1 but the click event did not work.
Please write tab 1 like this.
infoBubble.addTab('<div onclick="myfunction();">Tab1</div>', div);
//tab 1 click event
function myfunction(){
　alert("Tab1");
}
I have seen their are several such type of question already asked according to those answers one more new issue is raised,
I have shown multiple markers on map, now I need if I hover to specific marker then icon get changed and when I remove my cursor from the marker then set previous icon, below is my code
for (i = 0; i < Object.size(locations); i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i][1], locations[i][2]),
icon : site_url+'/assets/front/images/'+locations[i][4],
map : map,
url : site_url+'/detail/'+locations[i][3],
draggable: false,
hovericon: site_url+'/assets/front/images/'+hovericon,
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(this.hovericon);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(this.icon);
});
markers.push(marker);
function AutoCenter() {
var bounds = new google.maps.LatLngBounds();
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}
AutoCenter();
}
Above code is showing multiple markers that is good but when I hover to specific marker then it changing always last marker icon, but I need that icon should be changed only which I hover not the last one.
If I hover to any marker always last icon get changed see in attached image If I hover to first, second last icon is changing.
What I am doing wrong, any help ?
this happend because when the for ends you have the last marker to change attached to the listener.
You can use this insetead of marker inside the addListeners to get the intended one.
for (i = 0; i < Object.size(locations); i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i][1], locations[i][2]),
icon : site_url+'/assets/front/images/'+locations[i][4],
map : map,
url : site_url+'/detail/'+locations[i][3],
draggable: false,
originalicon: site_url+'/assets/front/images/'+locations[i][4],
hovericon: site_url+'/assets/front/images/'+hovericon
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
google.maps.event.addListener(marker, "mouseover", function() {
this.setIcon(this.hovericon);
});
google.maps.event.addListener(marker, "mouseout", function() {
//you have to retreive the original icon cause with the mouse hover you change the marker icon attribute
this.setIcon(this.originalicon);
});
markers.push(marker);
function AutoCenter() {
var bounds = new google.maps.LatLngBounds();
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}
AutoCenter();
}
This way you refer the element that you are interacting with(mouseover and mouseout) and not the last one in the for loop.
I didn't tested the code so I'm not sure is working.
look at this fiddle for working sample
hope this helps
I have an issue to add infoWindow to my markers generated by a FOR loop.
I want to generate a infoWindow to each marker.
I see only the last infoWindow is added, even if I clic to other marker, this infoWindow is shown in the last marker see screenshot
Here is my loop to create markers and infowindows :
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
markers.push(marker);
}
you need to find the current marker then get the info object from it.try this:
use:
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var markers=[];
function plotmap(){
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.SATELLITE,
center: new gm.LatLng(17.00,78.43), zoom: 10
});
var data=[{'rssi':"fgfghfgh",'lat':"17.43",'lng':"78.43"},{'rssi':"new one",'lat':"17.49",'lng':"78.53"}];
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
markers.push(marker);
}
}
</script>
<div id="map_canvas" style="width:600px;height:500px;"></div>
<script>
plotmap();
</script>
I think you should open infoWindow on given index, otherwise it's always referenced to the last loop item. So in click event you should open infoWIndow in a given i
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker[i]);
});
I guess if you click in a different marker then you will have a two open infoWindow. If you want to always keep a one open you can store currentOpen index and close it before open a new one.
In fact the problem was in
marker.info.open(map, marker);
Thet should be
marker.info.open(map, this);
OK, I've tried a ton of the examples on here and I just can't seem to get the Info Windows to get the Element Properly Appended. I'm sure this is something with How I've structured this that is simply wrong.
I've made my own Sidebar, and looking at this: http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm it should be possible. But I can't see what's different than my code.
So here's my AddMarker and Add Sidebar Functions
function addMarker(location, name, content) {
console.log("Adding Marker: "+location)
if (name === "Patient"){
var patient_icon = '<?php echo base_url();?>images/Profile.png';
var marker = new google.maps.Marker({
position: location,
map: map,
title: name,
icon: patient_icon
});
}else{
var marker = new google.maps.Marker({
position: location,
map: map,
title: name
});
}
markersArray.push(marker);
var info = new google.maps.InfoWindow ({content: content})
google.maps.event.addListener(marker, 'click', function(){info.open(map,marker);});
if (name != 'Patient'){
sidebar(name, marker, content)
}
}
function sidebar(name, marker, content){
name = name.replace(/\s+/g, '');
$("<div id='"+name+"'class='even' onclick=' function(){google.maps.event.trigger("+marker+", \"click\")' >"+content+"</div>").appendTo($('#prov_list'));
}
What am I missing that the Onclick Function on the Sidebar elements does Nothing?
Thanks!
You can try something like this, i think the problem was with the string concatenation.
Here's another way to create dom elements:
$("<div/>", {
'id': name,
'class': 'even',
'html': content
}).click(function(){
google.maps.event.trigger(marker, 'click');
}).appendTo($('#prov_list'));
Plain old DHTML:
function sidebar(name, marker, content){
var container = document.getElementById('prov_list');
var myDiv = document.createElement('DIV');
myDiv.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
myDiv.innerHTML = content;
container.appendChild(myDiv);
}
My marker will always displays the last info on click of it. Basically I want to display the corresponding info for each of the clicked markers. here is what I have so far:
$(function() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom : 2,
center: new google.maps.LatLng(43.65654, -79.90138),
mapTypeControl: false, //will remove the top right corner Map type(Satellite/Map)
//scaleControl: false,
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
$.get('example.xml', function(xml) {
$('marker',xml).each(function(i) {
var $this = $(this),
the_marker = new google.maps.Marker({
title: $this.find('label').text(),
map: map,
clickable: true,
position: new google.maps.LatLng(
parseFloat($this.find('lat').text()),
parseFloat($this.find('lon').text())
)});
new google.maps.event.addListener(the_marker, 'click', function() {
getInfo();
});
});
});
function getInfo() {
$.ajax({
type:'GET',
url:'example.xml',
dataType:'xml',
success: function(xml) {
$(xml).each(function() {
$(this).find("marker").each(function() {
$(this).find("info");
$("#newDiv").html($(this).find("info"));
})
})
}
})
$("#newDiv").html($(this).find("info").text());
}
});
It is like I am getting always the last infowindow on click of my markers, but rather i want the each marker to have its own infowindow open. Now I dont have infowindow's in my example and i have divs in it.
Thanks
You can simply use array to do it.
like,
markers[i] = new Marker({ some options });
new google.maps.event.addListener(markers[i], 'click', function() {
getInfo(i);
});
added:
still cannot get why'd you like to get only first marker in xml on click of any markers.
any demo or example?
if you wanna fetch the info of clicked marker, do it like this.
markers[i] = new Marker({ some options });
info[i] = $(this).find('info');
new google.maps.event.addListener(markers[i], 'click', function() {
$("#newDiv").html(info[i]);
});