CODEWITHSUNDEEP
google-maps-api-3hoverhighlightsidebarmarker
user2543462
user2543462

Reputation: 43

Google maps marker highlight

I've a scipt that places markers on a map, each marker has it's unique ID set as follows: 

marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: markerImg,
        id: uniqueid()
    });

after pushing each marker to the clusterer I run a function that builds a side bar that contains all markers on the map. each div of that sidebar represents a marker:

<div id="sidebar">
   <div id="marker1234"></div>
   <div id="marker1235"></div>
   <div id="marker1236"></div>
   ...
</div>

How can I create a function that on hovering the div, highlights the respective marker on the map? The problem is that I dont know how to target a single marker by its ID.

I saw a few solutions like this one http://www.geocodezip.com/v3_MW_example_hoverchange.html (found here on StackOverflow), but it relies on a different method to build the sidebar...

PS. I want to avoid to loop all markers everytime I hover the markerlist...

Upvotes: 1

Views: 9623

Answers (3)

guillefd
guillefd

Reputation: 2013

I found this pretty and simple solution in the URL you mentioned (http://www.geocodezip.com/v3_MW_example_hoverchange.html)

  • add mouse event to the html element that will trigger the highlight Example: added in table:

<table onmouseover="markers[ID].setIcon(image_hover_url)" onmouseout="markers[ID].setIcon(image_url)">...</table>

hints:

  • vars markers, image_url and image_url_hover should be global javascript vars.

Upvotes: 0

Shane
Shane

Reputation: 2455

The best way I have found is to keep the instance of each marker in an array. So you have an array of marker data in your server-side script which you use to create the JavaScript and the sidebar menu. Creating a JavaScript array to hold all the Google map marker objects. So if all is done correctly the index will match the same. So you can reference the marker object in the JavaScript array with the same marker index.

PHP

$markers = new array( );
$markers[0] = array('lat'=>'-30.00000', 'lon'=>120.00000, 'title'=>'Maker 0');
$markers[1] = array('lat'=>'-31.00000', 'lon'=>121.00000, 'title'=>'Maker 1');
$markers[2] = array('lat'=>'-32.00000', 'lon'=>122.00000, 'title'=>'Maker 2');

//write the JS
echo '<script>';
/*
   bunch of google map code here
 */

 //start to add in markers
 echo 'var gm_markers = new Array( );
 ';
foreach($marker as &k=>$m){
  echo ' gm_markers['.$k.'] = new google.maps.Marker({
                  /* maker options here */
              });
}
echo '</script>';

So now you have a JavaScript array of markers with array indexes that match your PHP array of markers. Then reference is easy!

//loop again for the list
echo '<div id="sidebar">';
foreach($marker as $k=>$m){
    echo '<div id="marker_'.$k.'" onmouseover="gm_markers['.$k.'].setAnimation(google.maps.Animation.BOUNCE);">'.$k.'</div>';
}
echo '</div>';

Make sense? So you can use the index form the array to access the makers in the JavaScript. I always use this method.

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117314

You don't need the IDs at all to access the markers, populate the sidebar when you create the marker, and store the marker as a property of the HTML-Element:

Sample code(makes the marker bounce when the element in the sidebar will be hovered):

var i = 0,
    sidebar = document.getElementById('sidebar');

var item    = document.createElement('div');
    item.innerHTML='Marker#'+(++i);
    item.marker=new google.maps.Marker({/*your marker-properties*/});
    item.onmouseover=function(){this.marker.setAnimation(google.maps.Animation.BOUNCE);};
    item.onmouseout=function(){this.marker.setAnimation(null);};
    sidebar.appendChild(item);

Upvotes: 6

Related Questions