How can I make a marker bounce on mouseover of an outside div?

Question

I'm trying to make a page that lists properties for rent on the left, and they are mapped on the right via the Google Maps API. So far, I have all of the properties on the left (all dummy-data now, but it's dynamically generated), and then on the right the Google Maps APi plots out all of the data (also dynamically). The sample page has 20 or so markers. What I'm looking to do now is: Whenever someone hovers over a property on the left, I want to bounce the marker on the map so people know which one to open.

My dev page is at: https://www.commercialrealestate-portland.com/available-now/

I've tried a number of suggestions, none of which worked so far. Based on my research, it looks like maybe I need to assign an ID to each individual Google Maps marker, so that I could then call the bounce on mouseover of a div.

I was thinking I'd put something like this in each div on the left:

<div class="listingBox" onmouseover="marker['unit145_the_waterman_building'].setAnimation(google.maps.Animation.BOUNCE);"></div>

But I'm not sure if that will work. When I go to my console, I get an uncaught reference error -- marker is not defined.

To get my markers, I build out an array of locations (the title/etc, the latitude, the longitude, and an ID). Then, I iterate through those locations and do a:

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: locations[i][3]
    })

But, I don't think the ID (which is the value in locations[i][3]) is carrying through, as the onmouseover doesn't work.

Actually, I'm not even sure if this approach is best. Really, my fundamental challenge is: I have X properties (divs) on the left (will always be changing as it's data-driven), and I want to be able to bounce that div's map marker on the right. I'm open to any types of suggestions -- suggested fixes to the above, links that might help, or different approaches altogether.

HoangHieu · Accepted Answer · 2019-06-15T03:33:08.283

-1

I have checked your website console log show error message "Uncaught ReferenceError: marker is not defined"

Checked your code, you have defined, that means onmouseover didn't work.

marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: gmid
});

You should make these changes

1: HTML Code.

<div class="listingBox" onmouseover="marker['unit189_ankeny_building'].setAnimation(google.maps.Animation.BOUNCE);">

change to

<div class="listingBox" id="unit189_ankeny_building">

2: Javascript Code.

var gmid = locations[i];

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map,
      id: _mid[3]
});
(function(_mid, _marker){
$('#' + _mid[3]).on('mouseover', function){
      _marker.setAnimation(google.maps.Animation.BOUNCE);
});
})(gmid, marker);

Update 1 See My example: https://jsfiddle.net/a5s07frj/

edited Jun 15 '19 at 03:33

answered Jun 13 '19 at 03:02

HoangHieu

2,802
3
28
44

I appreciate the suggestion. But, I'm not able to get it to work. – Jim Dee Jun 13 '19 at 18:20
I checked out your example, but did not see any of your map markers bounce on mouseover of your Marker divs. (I also tried your code on my own server, where I could see if it was related to having an APi key, but didn't see any bounce on mouseover there either.) – Jim Dee Jun 14 '19 at 17:23
Sorry this old version , Updated. – HoangHieu Jun 15 '19 at 03:28
Awesome. Thanks! – Jim Dee Jun 20 '19 at 22:43
BTW, the above answer can be built on via advice in this post (https://stackoverflow.com/questions/7339200/bounce-a-pin-in-google-maps-once) ... you could add to HoangHieu's code to make the marker bounce just for a moment. Here are 2 ways to amend that code to do that: ``` (function(_thisPin,_marker){ $('#' + _thisPin[3]).on('mouseover', function(e){ _marker.setAnimation(google.maps.Animation.BOUNCE); _marker.setAnimation(4); // or you could use: //setTimeout(function(){ _marker.setAnimation(null); }, 750); }); })(thisPin,marker); ``` – Jim Dee Jun 20 '19 at 22:46
Thanks for the pointers! The only thing I cannot now figure out with your new code is how the infowindows work. Do you know where I can add code (in your fiddle) to open infowindows when people click on each pointer? – Jim Dee Jun 21 '19 at 00:06
You can add your infomwindow into **(function(_beach,_marker){** function – HoangHieu Jun 21 '19 at 03:41

How can I make a marker bounce on mouseover of an outside div?

1 Answers1