CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3
user5405873
user5405873

Reputation:

how to dynamically highlight marker based on passed data to google map

How to highlight the marker based on the scroll of the div the div is shown below

My Html DOM

<div data-value="data 1"></div>
<div data-value="data 2"></div>
<div data-value="data 3"></div>
<div data-value="data 4"></div>

My javascript

var cutoff = $(window).scrollTop() + 200;

$('div').each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
        $('div').removeClass('current');
        $(this).addClass('current');
        console.log($(this).data('value'));

        //callGoogleMapHere(data..);

        return false; // stops the iteration after the first one on 
    }
});

here is example of working code: http://jsfiddle.net/pdzTW/212/

As you have noted callGoogleMapHere(data..); in the above code, i want to call google map from there with data passed so that i can Highlight the Marker on map.

here is my map code link(thanks to geocodezip) : http://jsfiddle.net/2gz7h123/64/

Question: i want to highlight the marker dynamically on Google map passing data from this function callGoogleMapHere(data..);

please help me thanks in advance!!!

Upvotes: 1

Views: 1733

Answers (1)

user7138697
user7138697

Reputation:

I appreciate that you are stuck and require help. However this is not a site in which people will simply do you work for you.

It appears that you lack the knowledge of what you are trying to achieve and simply want the work done. I therefore have a compromise which given the research you have conducted you should be able to obtain a plausible solution.

Given a set of divs

 <div data-value="0" class="notmap"></div>
 <div data-value="1" class="notmap"></div>
 <div data-value="2" class="notmap"></div>
 <div data-value="3" class="notmap"></div>
 <div data-value="4" class="notmap"></div>

we want to be able to call some function when they are hovered over. In your solution the same thing will be applied on the scroll.

using:

$(document).ready(function() {
  alert('please scroll output window and check the console');
  $(".notmap").hover(function() {
    highlightMarker($(this).data('value'));
  }, function() {
    stopHighlightMarker($(this).data('value'));
  });
});

this will call the highlightMarkerfunction on hover and stopHighlightMarker when you stop hovering over the div.

The highlight marker does the following:

function highlightMarker(i) {
  if (markers[i].getAnimation() !== null) {
    markers[i].setAnimation(null);
  } else {
    markers[i].setAnimation(google.maps.Animation.BOUNCE);
  }
}

Essentially I added an array of markers and it grabs the markers[i] element by passed through, the data-value number. Its a cheap way but hey-ho.

It then simple animates the icon so that it is visible and highlighted by bouncing up and down.

I appreciate that this is not really an answer to your question, but with the information I have provided should be sufficient to get your problem solved.

JSFIDDLE: http://jsfiddle.net/2gz7h123/68/

Upvotes: 0

Related Questions