Hi. I'm using the example on your site of the OTG team as the model for my client's google map. I have the google map with all custom posts showing on the map and a scroller of the advertisers to the right. you can see it here: http://icouponads.com/magazine/county-map/
I've been messing with the JS in the view and I can't get the pin on the advertiser list to connect to the map. Can you please help me finish this important part of the site?
Here is the view for the Map:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul id="js-map-elements" class="team-map-view1">
<wpv-loop>
<li data-marker-title="[wpv-post-title]"
data-marker-lat="[types field="latitude"][/types]"
data-marker-lon="[types field="longitude"][/types]"
data-marker-id="[wpv-post-link]">
<div class="team-info-wrap">
<a class="js-map-center-map team-center-marker" title="Locate on map"><img src="http://icouponads.com/magazine/wp-content/uploads/2014/04/pin.png" alt=""/></a>
<div class="team-infoWin js-map-infowindow-html"><a href="[wpv-post-url]">[wpv-post-title]</a></div>
</div>
</li>
</wpv-loop>
</ul>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
The JS for this view:
jQuery( document ).ready(function($) {
$("#js-map-elements").wpvmap({
iconPath : 'http://icouponads.com/magazine/wp-content/uploads/2014/04/',
iconImage : 'pin.png',
iconImageHover : 'pin-hover.png',
singleMapZoom : 15
});
});
and the combined output for the view:
[wpv-filter-meta-html]
<div class="clearfix">
<div>
<a class="js-map-fitbounds" href="#"><h6>Reset the map to view all Advertisers</h6></a>
</div>
[wpv-layout-meta-html]
<div id="js-main-map-canvas" class="google-maps team-map-height"></div>
</div>
Here is the View for the Scroller with the pin that I can't connect to the map. I would like the pin on the map to change to the hover image when the pin in the scroller is clicked.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<ul class="team-map-view1 clearfix">
<wpv-loop>
<li data-marker-title="[wpv-post-title]"
data-marker-lat="[types field="latitude"][/types]"
data-marker-lon="[types field="longitude"][/types]"
data-marker-id="[wpv-post-id]">
<div class="team-info-wrap">
<a class="js-map-center-map team-center-marker"
title="Locate on map">
<img src="http://icouponads.com/magazine/wp-content/uploads/2014/04/pin.png" alt=""/>
</a></div>
<div class="team-infoWin js-map-infowindow-html">
<h5>[wpv-post-title]</h5>
<p><h6>[types field="city"][/types]</h6> </p>
</div>
</li>
</wpv-loop>
</ul>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
and the JS (which I have changed numerous times…i think this is where my problem is)
jQuery( document ).ready(function($) {
$("#js-map-elements").wpvmap();
});
Thank you for your help. I'm sure it's an easy fix for you but for me, not so much!