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.
Related
I'm having a google map where google markers are put up. The placement of markers works well. But if I click a marker, the adress should open up in an infowindow. The adress, longtitude and latitude are loaded from model.js into the variable myLocations.
EDIT: Currently a click on any marker returns the adress of the last object in myLocations. But I would like to get the myLocations.adress of the one who was clicked.
var markerspots;
var spot;
var j;
for (j = 0; j < myLocations.length; j++){
spot = {
lat: parseFloat(myLocations[j].lati),
lng: parseFloat(myLocations[j].long)
};
contentString = myLocations[j].adress;
markerspots = new google.maps.Marker({
position: spot,
map: map,
icon: markerspot,
content: contentString,
id: j
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerspots, "click", (function(marker) {
return function(evt) {
infowindow.setContent(contentString);
infowindow.open(map, markerspots);
}
})(markerspots));
}
I have found lots of solutions, but I don't understand any of those. So how can I make the content of the clicked marker show up in an infowindow?
Thanks
Well you are accessing your contentString, which is set to the last one you created in your for loop.
What you really want is the content property of the marker you clicked on, which is stored in this.
So
google.maps.event.addListener(markerspots, 'click', function() {
console.log(this.content);
});
should do the trick.
Example here: https://jsfiddle.net/4tpnh00u/
My custom google maps code stopped working all of a sudden and I can't figure out why. If I paste the same exact code into a jsfiddle it works fine, however on my site it throws an error:
Uncaught TypeError: Object #<Object> has no method 'O'
or
Uncaught TypeError: Cannot call method 'unbindAll' of null
The pins are appearing on the map in the correct locations and respond to clicks appropriately (once) by bouncing up and down, however the popups do not pop up. What gives?
On your website, find the JavaScript code that handles the click event on one of your markers. You'll find the code in the map.html page itself:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(37.75538, -122.201983),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i, currentMarker = "null";
for (i = 0; i < locations.length; i++) {
marker = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
clickable: true,
map: map,
labelContent: locations[i][3],
labelAnchor: new google.maps.Point(22, 0),
labelClass: "maplabels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// in case they open a new info window without closing the old one, stop animation
if (currentMarker != "null")
currentMarker.setAnimation(null);
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
currentMarker = marker;
}
})(marker, i));
google.maps.event.addListener(infowindow, 'closeclick', function() {
currentMarker.setAnimation(null);
});
}
Now the actual code that handles the click is in the middle of that:
if (currentMarker != "null")
currentMarker.setAnimation(null);
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
currentMarker = marker;
Use the JavaScript debugger in Chrome or your favorite browser to set a breakpoint on the first line of this code (the if statement) by clicking in the left margin. Use the Sources tab in the developer tools to open the code.
If you aren't familiar with the JavaScript developer tools, here's an introduction to JavaScript debugging and a detailed introduction to the Chrome DevTools.
Now that you have the breakpoint set, click on one of your markers. It should stop on the line of code where you set the breakpoint.
Now use the Step Over command in the debugger to step through that code. On Windows, you can use the F10 key here. You'll see that the error happens when you try to execute this line:
infowindow.open(map, marker);
So what's wrong here? In the Chrome debugger, you can hover the mouse over any variable in the source code to see its current value.
If you look at the marker variable it looks like something fairly plausible, with properties that indeed have to do with maps and markers and such.
But take a look at the map variable. It looks like this:
Object {9: false, 16: false, 18: false, 27: false, 65: false}
That doesn't look much like a Google Maps API object, does it? In fact, some of those numbers sound very familiar. 65 is the character code for the letter 'a', 27 is Escape, and 9 is the Tab key.
It looks like somewhere else in your code, some other code has overwritten your global map variable with an unrelated variable of the same name. In fact, the name makes some sense: the map object is some sort of mapping (in the computer science sense, not the geographic sense) from character codes to booleans.
A simple fix would be to change the name of your map variable, to gmap or some other name that doesn't conflict with this other map variable. Or even better, you could wrap all of this map code inside a function so that your map variable is local to this function and won't be overwritten by a global variable elsewhere.
But it's also likely that the very existence of the other map variable is a bug! There may be some function elsewhere in the code that meant to have that map be a local variable, but simply forgot to use a var on it so it became global.
While I've got you, you can simplify that marker creation code a little by getting rid of the function-that-returns-a-function in the event handler. You're doing that to get a closure for the marker variable, but this is a needlessly complicated way to do it. Instead, you can simply put the entire body of your for loop in a function of its own. Calling that function will get you the closure you need without the extremely confusing function-returning-a-function.
Also, you don't need to use the string "null" to indicate a nonexistent currentMarker value.
And finally, you're setting an event listener on the infowindow for each marker, even though you have only one infowindow. You can set this event listener once.
Combining those ideas, you might end up with:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(37.75538, -122.201983),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(
infowindow, 'closeclick', stopAnimation
);
var currentMarker;
for (i = 0; i < locations.length; i++) {
addMarker( locations[i] );
}
function addMarker( location ) {
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(location[1], location[2]),
draggable: false,
clickable: true,
map: map,
labelContent: location[3],
labelAnchor: new google.maps.Point(22, 0),
labelClass: "maplabels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
google.maps.event.addListener(marker, 'click', function() {
stopAnimation();
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(location[0]);
infowindow.open(map, marker);
currentMarker = marker;
});
}
function stopAnimation() {
currentMarker && currentMarker.setAnimation(null);
currentMarker = null;
}
}
initMap();
Wonder if anyone can help me, I have setup a google map all works nicely. The only thing I cant work out how to do is to open an info window based on ID from an external html link that's not in the JS.
function initialize() {
// Create the map
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
infowindow = new google.maps.InfoWindow();
// Custom markers
var icon = "img/marker.png";
// Define the list of markers.
// This could be generated server-side with a script creating the array.
var markers = [
{ val:0, lat: -40.149049, lng: 172.033095, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
{ val:1, lat: -41.185765, lng: 174.827516, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title,
icon: icon,
id: data.val
});
// Create the infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.html;
content.appendChild(title);
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(content);
infowindow.open(map, this);
map.setCenter(this.position);
console.log(this.id);
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
}
<p id="1">link to open marker</p>
Any help would be gratefully appreciated
Richard :)
The Golden Goose
Then in your js have a function to open the infowindow (such as show()) which takes the properties from that link (opening id 7).
function show(id){
myid = id;
if(markers[myid]){
map.panTo(markers[myid].getPoint());
setTimeout('GEvent.trigger(markers[myid], "click")',500);
map.hideControls();
}
}
That's the function I used previously with one of the marker managers from v2. You have to make sure you set an id for each marker as you set it and then you can call it.
The one thing I made sure of (to simplify matters) was to make sure the map marker set/array was exactly the same as the sql result I used on the page. That way, using id's was a piece of cake.
I am a begginner in javascript, and I know that my code is a little messy. I feel as though I may have stepped on my own foot here but I am really hoping that there is some sort of work around.
What I am wondering is what the best way to add the event listener to the anchors is. Right now, I have a loop that sets all the markers on the map (so I didn't have to write the line of code each time for each marker) but looking back at it I am wondering if there is even a way to add an event listener now.
I have a list of links on the page, and I have an array full of data that i use to tag various things. What I need is to be able to click on the link (where it says "map it!") and for the info window to be prompted, and then I need to toggle that so that it closes if another one is opened
the website can be found here:
http://www.michiganwinetrail.com
And here is the full javascript page
http://www.michiganwinetrail.com/mainmap2.js
the code for the loop that I need to edit (which can be found at the bottom of that javascript link) is as follows:
function loadMap() {
var centerMich = new google.maps.LatLng(44.229457, -85.100098);
var myOptions = {
center: centerMich,
zoom: 7,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mainMichMap"), myOptions);
var homesouthwestDiv = document.createElement('div');
var homenorthwestDiv = document.createElement('div');
var homesoutheastDiv = document.createElement('div');
homesouthwestDiv.index = 1;
homenorthwestDiv.index = 2;
homesoutheastDiv.index = 3;
var homeControl = {
southwest: swRegions(homesouthwestDiv, map),
northwest: nwRegions(homenorthwestDiv, map),
southeast: seRegions(homesoutheastDiv, map),
};
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(homesouthwestDiv);
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(homenorthwestDiv);
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(homesoutheastDiv);
for (var i=0; i<=locations.length; i++) {
locations[i][0] = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][3],
map: map,
content: locations[i][4]});
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(locations[i][0], 'click', function() {
infowindow.setContent(this.content);
infowindow.open(map,this);
});
}
}
On click of the link you need to do something like this:
var myHtml = "<h2 class=\"firstHeading\">" + winery.name + "</h2>";
map.openInfoWindowHtml(new GLatLng(winery.fltLat, winery.fltLng), myHtml);
I had done a similar demo some time ago: http://dipoletech.com/beermenu/
I have a google map set up to find the user's current location, and center the map at that closest marker to their location. The markers, when clicked, open up an infobox (note this is a little different than an infoWindow - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html). What I want to do, however, is automatically open up the nearest marker without the user actually clicking. Here's the code to trigger a marker opening:
//loop through all locations to add a marker:
addMarker = function(loc) {
var markerLoc = new google.maps.LatLng(loc.Lat, loc.Long);
var marker = new google.maps.Marker({
map: map,
position: markerLoc
});
google.maps.event.addListener(marker, "mousedown", function() {
var infoOpts = {
content: loc.markerText,
boxStyle: { background: "none transparent", width: "180px"},
pixelOffset: new google.maps.Size(-90, 0),
closeBoxMargin: "5px"
};
var ib = new InfoBox(infoOpts);
ib.open(map, marker);
});
markers.push(marker);
};
So somehow I have to trigger the mouseDown function of the appropriate marker, but it has to be done in a function outside of this one. I will have a reference to the appropriate marker in the array (markers[closestmarker]).
I see that this question has been sitting for quite awhile, but, just in case, this answer may be helpful:
trigger google maps marker click
The code would look like this:
var marker = new google.maps.Marker({});
new google.maps.event.trigger( marker, 'click' );
I found I needed to attach a click event to the marker like so
var marker = new google.maps.Marker({});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
new google.maps.event.trigger( marker, 'click' );