Ask your WordPress questions! Pay money and get answers fast! (more info)

How to links geolocations on posts and show on a map WordPress

  • SOLVED

I have a bunch of posts, each with a geographic location.

I'd like to allow them to link to each other, eg

A -> B
A -> C
A -> D
E -> A
F -> A

and then draw a google map with the connections, colour coded to indicate the direction of the relationship.

Is that possible? How?

Answers (3)

2013-08-12

Hariprasad Vijayan answers:

Can you please explain what is A,B,C...?


Hariprasad Vijayan comments:

Need bit more clarification about your requirement. We can generate Google map from geo location that stored in a post. Did't get the idea about the relation of post.


eddowding comments:

A, B, C.. are all other posts.

The goal is to make a simpler version of the map at http://www.foodtrade.com/company-maps/143365


Hariprasad Vijayan comments:

How you are keeping geographic locations in a post?


Hariprasad Vijayan comments:

And also please tell how to relate posts


eddowding comments:

I'm flexible - we can do it however.


Hariprasad Vijayan comments:

Okay. You can keep latitude and longitude in custom fields of posts and can call it like following

<?php
get_header();
?>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var flightPlanCoordinates = [
<?php
$location_query = new WP_Query( array(
'posts_per_page' => -1
) );

while ( $location_query->have_posts() ) {
$location_query->the_post();
?>
new google.maps.LatLng(<?php echo get_post_meta( get_the_ID(), 'latitude', true ); ?>, <?php echo get_post_meta( get_the_ID(), 'longitude', true ); ?>),
<?php
}
wp_reset_postdata();
?>
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="container">
<div id="content">
<div id="map-canvas"></div>
</div><!-- #content -->
</div><!-- #container -->
<?php
get_footer();
?>

Check the url https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=en It describes how to draw lines between two points.
Please ask if you have any doubt in this.


eddowding comments:

Would that iterate through all connected posts?


eddowding comments:

ah sorry to be clear:

PostA is related to postB and PostC.

All three posts have lat/long.

So we'd need to set up direct relationships between A and B and A and C, and THEN plot the map. Sorry this is getting more complicated..


Hariprasad Vijayan comments:

Okay... Can you please tell me how the posts are related with each other?


eddowding comments:

I'm not entirely sure yet.. I was thinking there'd be a plugin to relate posts to each other?

2013-08-12

Arnav Joy answers:

please explain some more points , as Hari said your question is needs more clarification .

2013-08-12

Sabby Sam answers:

Yes, it is possible, But budget is very low.