I am trying to get a Google Maps instance setup, where I can have the marker icons change into a larger image on hover. I am loading the larger image within arrays and then trying to pass those values into the callback event function. For some reason I only get a default map marker showing on hover, and not the image.
You can see where I am doing this below by using the "testVar".
https://jsfiddle.net/sj1zv02a/
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map,
id: id,
icon: 'http://www.christielakekids.com/_images/new/blue_circle.png',
url: locations_programs[i][5],
image: locations_programs[i][4],
zIndex: 100
});
var testVar = locations_programs[i][4];
google.maps.event.addListener(marker, 'mouseover', function (event, testVar) {
this.setIcon(testVar);
});
google.maps.event.addListener(marker, 'mouseout', function (event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
I would also like to know how to attach a URL to the larger image so it will redirect there when clicked. I have the "URL" parameter set in the marker code, but that doesn't seem to do anything.
I have found this solution (the sample is for //**** PROGRAMS only but is easly extendible for the other section.
the JSFiddle for test
And the code for a better explanation
In the marker attributes add a altIcon attribute and assign to this the image you need.
In mouseover listener set the icon using this.setIcon(this.altIcon)
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,image: locations_programs[i][4]
,zIndex:100
,altIcon: locations_programs[i][4]
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon(this.altIcon);
});
I met some difficulties to display images in the array. (the site says file not found) so inside jsfiddle I used icons with different colors.
Related
I want to create webpage that initially have only one element exclude footer and header: Google Map with 20 markers. I have 20 pictures and description to them that related to each marker. When it is the first click on marker, it should to pop up the new divs : img and text(description). After that if we click on another marker our new divs must be refreshed to related content.
Is it possible? How can I create this with Google Maps API?
http://i.imgur.com/HiapP9R.jpg
When creating the marker, add a unique id to that marker, that will later help you identify which marker has been clicked and pick the corresponding image/description for display.
//variable options contains different marker options
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(options.lat, options.lng),
map: myMap,
draggable: options.draggable || false,
animation: options.animation || "none",
icon : options.markerImage
});
myMarker.uniqueID = "myMarkerUniqueID123";
google.maps.event.addListener(marker, 'click', function() {
showDetailsAndImage(marker.uniqueID);
});
function showDetailsAndImage(id) {
//do whatever you want to do here
}
Just add an eventlistener for the markers.
https://developers.google.com/maps/documentation/javascript/examples/event-simple
I have created an application for showing an Information Window popup for markers, The application is working fine and the popup is showing correctly but the only solution is that along with the custom Information Window popup when under mouse-over, default popup with html tag is showing like as shown below.
JSFiddle
Can anyone please tell me some solution for this
My code is as given below
var infowindow = new google.maps.InfoWindow();
function point(name, lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: name,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(marker.title);
infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var viewModel = {
points: ko.observableArray([
new point('<div>Test1<br>Test5</div>', 55, 11),
new point('Test2', 56, 12),
new point('Test3', 57, 13)])
};
function addPoint() {
console.log(viewModel.points().length);
for (var i = 0; i < viewModel.points().length; i++)
{
console.log(i);
console.log(viewModel.points().marker.title);
}
viewModel.points.push(new point('a', 58, 14));
}
ko.applyBindings(viewModel);
You could manually remove the element title attribute on mouseover.
Try changing
google.maps.event.addListener(marker, 'mouseover', function () {
To
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.ya.target.removeAttribute('title');
Also for Edge, you need to be change it to:
e.ya.target.parentElement.removeAttribute('title')
JSFiddle Link (Google Maps API not working)
It appears that the title of your marker is set to the html content of your pop up window.
When you create the marker object, give it a title attribute of what you would like to be displayed (i.e. name of your location...)
var marker = new google.maps.Marker({
position: whateverpositionyouset,
title: whatevertitleyouwant,
map: map
})
I have been taking advantage of this thread in working on almost the same problem. I am able to get the Google Maps API to properly display European accented glyphs in the pop-up display when a marker is clicked, but the same encoded text string is not properly rendered on mouseover.
So, after looking at the helpful code example in JSFiddle, and not being able to use that suggested technique for removing the 'title' text, it finally became clear to me what MrUpsidown was suggesting when he thought we might just change the name of the property being displayed as a title. I did not realize that the definition of the reserved property 'title' was "text to be displayed on hover." So, the simplest solution is to use a property such as 'myTitle' in the Marker options list. When there is no title property, hovering becomes a non-event.
I have a function that loops an array of markers and assigns click events to all of them.
for(var key in markers){
clickEvent(markers[key], sekolah[j].show, sekolah[j].hide, key);
}
function clickEvent(mark, showArr, hideArr, key){
var listener = google.maps.event.addListener(mark, 'click', function() {
//does a lot of stuff
});
}
What I would like to do is to remove/disable all click events when any marker has been clicked (so that no two markers can be clicked sequentially without resetting the map first). The click events would be enabled again when the user resets the map.
This is the function to reset the map:
google.maps.event.addListener(map, "click", function(){
setAllMap(map); //Shows all markers
//and a lot of stuff
});
I have tried using addListenerOnce, but that didn't work. I have also tried this suggestion from another post, but the result was the same as using addListenerOnce.
Is there a way to achieve this?
Thank you.
PS this is how I created markers:
var newMark = new google.maps.Marker({
map: map,
position: pos,
id: ids,
title: name,
icon: "res/schoolf.png"
});;
markers[ids] = newMark;
I'm using google maps v3, and my issue is that I have 200+ polygons on one map, they are all editable, and I need to make an ajax call in the event listeners for change which use path instead of the polygon to detect the changes.
so in the callback function this = polygon.getPath(), how can I get the polygon that it belongs to. In the polygon I use set to set the info I require for the ajax call.
poly1.set('name', 'poly1');
poly1.set('id', 1);
google.maps.event.addListener(poly1, 'dragend', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'insert_at', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'remove_at', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'set_at', setNewArea);
so in setNewArea, I can easily check this to see if it's the poly or the path, but if it's the path I have no way to get the parent poly for it. I don't want to have 200 custom callbacks just to hardcode the poly, there has to be an other cleaner way.
One way to do this is to add the object reference to poly1 to your assigned callback. Here is some code I wrote using the maps API that adds a listener for a click event on a specific marker that opens an info window.
var latLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latLng,
map: window.map,
title: pinName
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(window.map, marker);
});
So for your example, you might want to do something like what's below. That will ensure that your callback function is getting a reference to the poly object, even if the triggering event is related to the path.
poly1.set('name', 'poly1');
poly1.set('id', 1);
google.maps.event.addListener(poly1, 'dragend', function() {
setNewArea(poly1);
});
google.maps.event.addListener(poly1.getPath(), 'insert_at', function() {
setNewArea(poly1);
});
You can make circular reference among objects.
var thePath = poly1.getPath();
thePath.parent = poly1;
google.maps.event.addListener(thePath, 'set_at', function () {
console.log('My parent is the polygon', this.parent);
}.bind(this);
I am trying to change the infowindow in Google maps to the smartinfowindow but for some reason the position of the infowindow is wrong. I never had this issue with the standard infowindow, only the smartinfowindow.
I have found that if I remove position: relative using Firefox inspector the map moves to the top left of the window and the smartinfowindows are then in the correct position.
So is there something I'm missing?
I create the markers with the following:
for (var i = 0; i < data.locations.length; i++) {
var dataPhoto = data.locations[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
latlngbounds.extend( latLng );
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://www.irishcottageholidays.com/images/cottage1.png'
});
listenMarker(map,marker,InfoWindow,dataPhoto.mID)
markers.push(marker);
}
And then to create the smartinfowindow:
function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
load_content(map,this,InfoWindow,mID);
});
function load_content(map,marker,InfoWindow,mID){
var $j = jQuery.noConflict();
$j.ajax({
type : 'GET',
url : '/ajax/map_popup.asp',
data: {
mID : mID
},
success: function(result){
new SmartInfoWindow({position: marker.getPosition(), map: map, content: result});
}
});
}
Originally I created the infowindows using:
InfoWindow.setOptions({
disableAutoPan: true,
maxWidth: 280
});
InfoWindow.setContent(result);
InfoWindow.open(map, marker);
And this worked but now I've changed to the smartinfowindow, it loads the infowindow but not in the right position.
Thanks for all help in advance.
---- EDIT ----
I now have an issue with the smartinfowindow not closing when opening another and have been unable to achieve this so far. Everything I've found so far seem to apply to the standard infowindows and don't work on the smartinfowindow.
Thanks again for all help in advance.
I believe you should change smartinfowindow properties by editing the smartinfowindow.js file.
I've managed to get a solution through Experts Exchange.
Smartinfowindow position solution:
SmartInfoWindow creates a div to contain the content of the infowindow and appends it to the body. It's position is set to absolute relative to the body. It assumes your map is in the top left corner of the document.
The simple solution is to absolute position the SmartInfoWindow relative to the map canvas instead of the body. To do this you must edit the smartinfowindow.js file on line 178.
Instead of:
document.body.appendChild(div);
Replace with:
var mapDiv = document.getElementById("map");
mapDiv.appendChild(div);
With "map" as the id of the div that holds the map.
Remove smartinfowindow when opening a new one:
function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
load_content(map,this,InfoWindow,mID);
});
}
Where:
if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
was added to my code
It assumes you have jquery on the page already and no other google map add-ons are creating divs inside the map div.
All credit to tommyBoy on Experts Exchange for both solutions.