i'm new to javascript, hope you'll forgive me my bad if i'm doing something wrong.
In fact, i've allready found a solution for my problem, but i don't get how exactly get it into my own code.
Google Maps API - bouncing marker issue
Unfortunately i can't just comment it because i'm new on stackoverflow.
My Problem:
I'm working on a map with several markers on it. If i click on a marker, i want it bouncing and switching its color by a different icon i set. All fine till this point, but at the moment all markers i clicked won't stop bouncing. I want the marker bouncing, till i click another marker. At this point the "old" marker should stop bouncing and just the new one start.
//Marker Icons
var unvisitedMarker = 'img/m1.svg';
var activeMarker = 'img/m2.svg';
var visitedMarker = 'img/m3.svg';
//Add Marker Function
function addMarker(props) {
marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: unvisitedMarker
});
//Opens marker information
var marker.addListener('click', function() {
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
So i got this code from the other Thread i linked from user "doublesharp":
// track marker that is currently bouncing
var currentMarker = null;
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('loc-info').innerHTML = html;
// remove the bounce from the "old" marker
if (currentMarker) currentMarker.setAnimation(null);
// set this marker to the currentMarker
currentMarker = marker;
// add a bounce to this marker
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
I don't know exactly how to implement this in my owm code. And further - how do i get realized to switch the icon after it stoped bouncing to the "visitedMarker"?
Thank you very much in advance!
The idea of that solution is to keep a reference to the clicked marker and modify that marker when a new one is clicked.
This is what I mean:
var currentMarker = null; // Define this variable preferably in the global context.
....
marker.addListener('click', function() {
if(currentMarker){ // Check if there is already an active marker
currentMarker.setAnimation(null);
currentMarker.setIcon(visitedMarker);
}
currentMarker = marker;// Keep a reference to this marker because it will became active.
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
Related
On small zoom levels one place will be displayed twice or more (world map is repeated horizontally). When I place marker on map with coordinates (e.g. -32.05604, 115.74718) I will see it on map more than once. It's normal.
But if I try to show infowindow on mouse hover I will get wrong behaviour. Infowindow will be always showed near one of my markers and never near other, without relation what marker was under mouse cursor.
See example here: (try to move mouse to left marker on map).
https://jsfiddle.net/m3wpk1gr/1/
How to show infowindow for marker which under mouse?
My code:
function initialize() {
var myLatLng = new google.maps.LatLng(-32.05604, 115.74718),
myOptions = {
zoom: 1,
center: new google.maps.LatLng(-32.05604, 0)
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
var iw = new google.maps.InfoWindow();
marker.addListener('mouseover', function() {
iw.setContent('InfoWindow');
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
}
initialize();
I'm afraid there is nothing you can do to get the desired result(the position is correct, so when the position exists multiple times on a map, the API has to make a decision).
What you can do: set the optimized-option of the marker to false, then they will not be repeated at lower zoom-levels
White bottom tip of marker infowindow appears in upper left corner of map when moving mouse quickly over both markers left-right-left.
See it in action here http://jsfiddle.net/WGy4g/3/
var map = null;
initialize();
function initialize() {
var mapOptions = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
addMarker(-34.397, 150.644);
addMarker(-34.377, 150.534);
}
function addMarker(lat,lng) {
var marker = new google.maps.Marker({position: new google.maps.LatLng(lat,lng), title: "marker"});
marker.setMap(map);
google.maps.event.addListener(marker, 'mouseover', function() {
if (!this.infowindow) {
this.infowindow = new google.maps.InfoWindow({content: 'abc'});
}
this.infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.infowindow.close();
});
}
Posted a bug report: https://code.google.com/p/gmaps-api-issues/issues/detail?id=6746&thanks=6746&ts=1401343988
Possible duplicate of Google map js api version 3 infowindow glitch
I can confirm that this happens in both IE and Google Chrome. It appears to be an issue with the Google Maps API, therefore you were right to list this as a bug. To try working around the problem in one of my own scripts, I have tried; using the setPosition method of the InfoWindow class to set specific LatLng coordinates to 0,0 before invoking the open method; and fiddling around with the pixelOffset property through the setOptions method, but to no avail. I also considered changing the visibility state of the InfoWindow back and forth, but there is no easy way of doing this.
Waiting for the bug to be fixed appears to be the only feasible option.
I am having Google Map with InfoWindows being added dynamically. The issue is, when two InfoWindows overlap, the recent one won't always be on top of older ones.
How can I make sure latter InfoWindow always show up on top of all other InfoWIndows using Javascript/jQuery?
The InfoWindows are added when I receive new images and coordinates through websocket. Here is my code:
function addToMap(image) {
console.log("In addToMap...");
coordinates = image[2].split(',');
pin=new google.maps.LatLng(coordinates[0], coordinates[1]);
if(marker) {
marker.setMap(null);
}
var markerIcon = image_car_icon;
marker=new google.maps.Marker({
position:pin,
zIndexProcess: function( m )
{
return 9999999 + pin_count;
},
icon:markerIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
pin_count++;
if(image[0] != "NOP") {
popup = new google.maps.InfoWindow({
content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
});
popup.open(map, marker);
}
}
popup is the InfoWindow created when I get a new image. Suppose two images have almost same coordinates, I want the second InfoWindow to be on top (z-index). But, most of the time, the first window stays on top.
I have found out a solution. I am manually modifying the z-index of the marker by using the image as the handle. marker_count is a running marker, so the z-index will be greater than the previous marker.
google.maps.event.addListener(popup, 'domready', function() {
console.log("DOM READY...........................");
// Bring latest Image to top
e = $('#pin_' + img_count).parent().parent().parent().parent();
e.css({
'z-index' : (99999 + marker_count),
});
});
As the title states how can I with Google API 3 open Infowindow from divs outside google maps.
this is what I am doing today but this only working on the last div link and not every link
markerObj = document.getElementById(markerId);
markerObj.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
Any clues?
I think to make this work you'd need to have an array of markers. Then you'd trigger the click on the exact marker you want (right now it'll just do it on your last marker).
So, as you add markers to your map, append them into an array:
var markers = [];
var marker = new google.maps.Marker({ ... });
marker.addListener('click', function() {
infowindow.setContent('blah blah');
infowindow.open(map, this);
});
markers.push(marker);
Then on your divs, pass in an ID to work out which of the array you're dealing with.
<div id="link0">1</div> <div id="link1">2</a> (JS arrays start at zero)
Then just a slight amend to your code:
markerObj = document.getElementById(markerId);
// work out which number it is
var linkID = markerId.replace("link", "");
markerObj.onclick = function(){
google.maps.event.trigger(markers[linkID], 'click');
}
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
Here's my code, which runs on document.ready:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});
It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.