Hi. I'm setting up an advertiser's site. For each advertiser, I have a CPT with the long/lat defined in a custom field. For the first step, I want to show a map with the merchant location (on a smart phone, the user will be able to navigate to the merchant). I am following the directions on the post http://wp-types.com/documentation/user-guides/map-wordpress-posts/ but I am having trouble making it work. Here's what I did; can you coach me please?
My goal is to either show the map on the search results and on the individual CPTs or have a button that will show the map (maybe on a separate page with the view on it). After that, I want to create a single map with all posts on it. For now, so I can know how, I want to add the map to the search results.
If you'd like, I would be glad to give you access to the admin backend.
The site is in a sandbox and can be seen here: http://emperorofthefreeworld.com/ic/
I've added the long/lat for one of the sample merchants (use the global search on the SEARCH page and type 'tier';that's the merchant with the long/lat in the custom fields).
The Search Results are in a content template "Search Results 0303". I added both the view called "advertiser-map" and the content template called "advertiser-map" but neither one works. I just stuck it at the bottom of the code to get it to work before I integrate it with div tags. I left it with the view in there.
Here is the search content template code with the map view at the end (this is what formats the search results):
<div class="one-third first"> <a href="[wpv-post-url]">[types field="logo" width="200" height="200" align="left" resize="proportional"][/types]</a></div> <div class="two-thirds"> <h3>[wpv-post-link]</h3> <div class="search-phone">[types field="phone-number"][/types]</div> <div class="search-address"> [types field="address-1"][/types] <br /> [types field="city"][/types], [types field="state"][/types] [types field="zip-code"][/types]</div> <div><b>Quick Details:</b> <br/>[types field="description"][/types] </div> <br /> <div class="discounts"> <b>Available Discounts for:</b> <b>AAA:</b> [types field="aaa-discount" state="checked"]Yes[/types][types field="aaa-discount" state="unchecked"]No[/types] <b>AARP:</b> [types field="aarp-discount" state="checked"]Yes[/types][types field="aarp-discount" state="unchecked"]No[/types] <b>Senior Citizen:</b> [types field="senior-citizen" state="checked"]Yes[/types][types field="senior-citizen" state="unchecked"]No[/types] <b>College Student:</b> [types field="college-student" state="checked"]Yes[/types][types field="college-student" state="unchecked"]No[/types] <b>Coupon Available:</b> [types field="coupon-available" state="checked"]Yes[/types][types field="coupon-available" state="unchecked"]No[/types] <br /> <div class="more-button"><a href="[wpv-post-url]">full Advertiser Info</a> </div> </div> [wpv-view name="advertiser-map"] <hr />
this is the code for the advertiser-map view:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div id="js-main-map-canvas" class="google-maps adv-map-height"></div>
<ul id="js-map-elements" class="adv-map-view">
<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="adv-info-wrap">
<a class="js-map-center-map adv-center-marker"
title="Locate on map">
<img src="/wp-content/uploads/2014/03/pin.jpg" alt=""/>
</a>
</li>
</ul>
</wpv-loop>
<!-- 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]
This is the code for the content template 'advertiser-map':
<div id="js-map-element"
class="adv-main"
data-marker-title='[wpv-post-title]'
data-marker-lat='[types field="latitude"][/types]'
data-marker-lon='[types field="longitude"][/types]'>
<h3>[wpv-post-title] Map</h3>
<div id="js-main-map-canvas" class="google-maps adv-map-reduced-height"></div>
</div>
Here is the code for the JavaScript
jQuery( document ).ready(function($) {
$("#js-main-map-canvas").wpvmap({
iconPath : 'www.emperorofthefreeworld.com/ic/wp-content/uploads/2014/03/',
iconImage : 'pin.jpg',
iconImageHover : 'pin.jpg',
singleMapZoom : 5
});
});
Here's the code for the CSS
<div id="js-map-element"
class="adv-main"
data-marker-title='[wpv-post-title]'
data-marker-lat='[types field="latitude"][/types]'
data-marker-lon='[types field="longitude"][/types]'>
<h3>[wpv-post-title] Map</h3>
<div id="js-main-map-canvas" class="google-maps adv-map-reduced-height"></div>
</div>