Quantcast
Channel: Toolset » All Posts
Viewing all articles
Browse latest Browse all 20145

Map all posts on Google Maps

$
0
0

Hello,
I have hard time making this to work, even following this example http://wp-types.com/documentation/user-guides/map-wordpress-posts/#enable-map, map won't show up.

Idea is to map all posts which have filled up latitude and longitude custom fields. Those posts are presented as markers on Google map. When you click on them, there is featured image and post title, user can click on title or image and it that will take user to post.

So, I have two custom fields: latitude and longitude. Any ideas how will View look like to display them on Google map?

Now I have:

On page:

<div class="clearfix">
  <div>
    <a class="js-map-fitbounds" href="#">Center map to view all points</a>
  </div>
  [wpv-view name="wpv-layout-meta-html"]
  <div id="js-main-map-canvas" class="google-maps team-map-height"></div>
</div>

CSS:

.team-map-height {
  width:90%;
  height:400px; 
}
.google-maps img {
    max-width: none;
}

Java script:

jQuery( document ).ready(function($) {
  $("#js-main-map-canvas").wpvmap();
});

and View layout:

[wpv-layout-start]
<!-- wpv-loop-start -->
<script type="text/javascript">
var otgLocations=[
 <wpv-loop>
   {
    markerId:'[wpv-post-id]',
    markerTitle:'[wpv-post-title]',
    markerLat:'[types field="latitude"][/types]',
    markerLon:'[types field="longitude"][/types]',
     },
 </wpv-loop>
];
</script>
<!-- wpv-loop-end -->
[wpv-layout-end]

Any advice?


Viewing all articles
Browse latest Browse all 20145

Trending Articles