63374

Markers not appearing on Google Map using wp_query to find points

Question:

I am using the <a href="https://wordpress.org/plugins/wp-favorite-posts/" rel="nofollow">WP Favorite Posts</a> plugin to allow users to select their favourite tours on the site. The posts are saved using to cookies to a saved template provided by the plugin. I have edited this template to include a map and to pull the coordinates from a Custom Meta Field.

The full template can be found at <a href="http://pastebin.com/zDrr5fPn" rel="nofollow">http://pastebin.com/zDrr5fPn</a>.

The code I have included to display the map is:

<div id="map" style="width: 100%; height: 250px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>

and the code I am using for the loop is:

while ( $loop->have_posts() ) : $loop->the_post(); if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) : ?> <div style="display:block;"> <script type="text/javascript"> function initialize() { //load map map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: new google.maps.LatLng(53.3498, -6.2603), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }); var savedMarkers = new Array(); <?php $saved_pos = get_post_meta($post->ID, 'custom_latlng', true);?> function addMarker() { var savedMarker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(<?php echo $saved_pos ?>), icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', }); savedMarkers.push(savedMarker); } } </script> </div>

At the moment, when I view the source, I can see the points being selected, the coordinates do appear. However they do not appear on the map itself. It is as if the points are appearing in the list of saved posts but not on the map at all.

I hope this makes sense.

Cheers

Answer1:

Inside the loop only populate an array with the latitudes/longitudes, create initialize outside of the loop:

<div id="map" style="width: 100%; height: 250px;"></div> <script type="text/javascript"> function initialize() { //load map map = new google.maps.Map(document.getElementById('map'), { zoom: 9, center: new google.maps.LatLng(53.3498, -6.2603), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }); //create the markers for(var i=0;i<savedMarkers.length;++i){ savedMarkers[i] = new google.maps.Marker({ map: map, position: new google.maps.LatLng(savedMarkers[i][0], savedMarkers[i][1]), icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', }); } } <?php //create a php-array to store the latitudes and longitudes $savedMarkers=array(); //use the loop to populate the array while ( $loop->have_posts() ) : $loop->the_post(); if ( get_post_meta($post->ID, 'custom_latlng', true) !== '' ) : $savedMarkers[]=explode(',',get_post_meta($post->ID, 'custom_latlng', true)); endif; endwhile; ?> //print the array as js-variable savedMarkers= <?php echo json_encode($savedMarkers);?>; </script>

It's not tested, there may be some errors, but it should be sufficient to demonstrate the workflow.

<hr />

<strong>Related to the comments:</strong> To apply the post-title as infowindow-content also store the title in the savedMarkers-items:

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)), array(get_the_title()));

when you create the marker create a custom property for the marker where you store the infowindow-content(let's call the property content):

//create the markers for(var i=0;i<savedMarkers.length;++i){ savedMarkers[i] = new google.maps.Marker({ map: map, position: new google.maps.LatLng(savedMarkers[i][0], savedMarkers[i][1]), icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', //the content(post-title) content: savedMarkers[i][2] }); }

Now use this content as infowindow-content:

google.maps.event.addListener(savedMarkers[i], 'click', function() { infowindow.setContent(this.get('content')); infowindow.open(this.getMap(), this); } ); <hr />

<strong>You may also create a link to the posts inside the infowindows:</strong>

$savedMarkers[]=array_merge(explode(',',get_post_meta($post->ID, 'custom_latlng', true)), array(get_the_title(),get_permalink()));

......

//create the markers for(var i=0;i<savedMarkers.length;++i){ savedMarkers[i] = new google.maps.Marker({ map: map, position: new google.maps.LatLng(savedMarkers[i][0], savedMarkers[i][1]), icon: '/wp-content/themes/dublin-visitors-centre/images/saved_icon.png', //the content(post-title) title: '' + savedMarkers[i][2], //post-URL href: savedMarkers[i][3] }); }

..........

google.maps.event.addListener(savedMarkers[i], 'click', function() { var link=document.createElement('a'); link.appendChild(document.createTextNode(this.get('title'))); link.setAttribute('href',this.get('href')); infowindow.setContent(link); infowindow.open(this.getMap(), this); } );

Recommend

  • Wordpress Sum meta_values from posts and order them per category
  • Escape character
  • Wordpress category sort by date
  • Scope: Using Variable Defined in a Function
  • ACF fields not showing on a wordpress custom taxonomy page
  • Trying to get random array value to echo on element class
  • Wordpress -how to return just current month posts on archive.php
  • Featured Image from External URL not Working Properly
  • wordpress custom page template
  • wp-query category and has tag
  • Change the cart item quantity for specific products in woocommerce
  • WooCommerce hook after order is updated?
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Free memory of cv::Mat loaded using FileStorage API
  • How do I configure my settings file to work with unit tests?
  • Memory offsets in inline assembly
  • How to stop GridView from loading again when I press back button?
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • java string with new operator and a literal
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize