php - Google Maps API and Wordpress with locations -

im busy made page in wordpress calculate diffrence between 2 places.

what have far works have couple of locations inside wordpress , there customfield longitude , latitude need loop.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> <script> var p1 = new google.maps.latlng(<?php echo $lat;?>, <?php echo $long;?>); // here comes input result var p2 = new google.maps.latlng(52.162304, 5.4606); // every shop location //bereken de aantal km's tussen de twee punten function calcdistance(p1, p2) {     return (google.maps.geometry.spherical.computedistancebetween(p1, p2) / 1000).tofixed(2); } //alert(calcdistance(p1, p2)); $( document ).ready(function() {     $('#afstand').html('distance between p1 , p2 is: ' + calcdistance(p1, p2) + ' km'); }); </script> 

here code wich change input field long , latitude:

<?php $address = $_post['adress']; $url = "https://maps.googleapis.com/maps/api/geocode/json?address=$address"; $ch = curl_init(); curl_setopt($ch, curlopt_url, $url); curl_setopt($ch, curlopt_returntransfer, 1); curl_setopt($ch, curlopt_proxyport, 3128); curl_setopt($ch, curlopt_ssl_verifyhost, 0); curl_setopt($ch, curlopt_ssl_verifypeer, 0); $response = curl_exec($ch); curl_close($ch); $response_a = json_decode($response); $lat = $response_a->results[0]->geometry->location->lat; $long = $response_a->results[0]->geometry->location->lng;  echo 'latitude: '.$lat; echo "<br />"; echo 'longitude: '.$long; ?> 

but want p2 every location in wordpress loop of locations:

<?php                 $loop = new wp_query(                 array(  'post_type' => 'locatie',                         'posts_per_page' => -1,                         'post_status' => 'publish'                     )                 );   while ( $loop->have_posts() ) : $loop->the_post();                          <?php                         $locationgoogle = get_field('google_maps');                         echo '<pre>lat: '.print_r($locationgoogle['lat'],true).'</pre>';                         echo '<pre>long: '.print_r($locationgoogle['lng'],true).'</pre>';                         ?>  endwhile; wp_reset_query(); ?> 

i'm close don't know how make loop echo on each locations distance between $_post['adress'] ($lat , $long) $locationgoogle['lat'] & $locationgoogle['lng']

home 1 can me out!

update: made this:

<script> var p1 = new google.maps.latlng(<?php echo $lat;?>, <?php echo $long;?>); <?php while ( $loop->have_posts() ) : $loop->the_post(); $locationgoogle = get_field('google_maps'); $pageid = 'p'.get_the_id(); echo 'var '.$pageid.' = new google.maps.latlng('.$locationgoogle['lat'].', '.$locationgoogle['lng'].');'; ?> function calcdistance(p1, <?php echo $pageid ;?>) {     return (google.maps.geometry.spherical.computedistancebetween(p1, <?php echo $pageid ;?>) / 1000).tofixed(2); } $( document ).ready(function() {     $('.afstand-<?php echo $pageid;?>').html(calcdistance(p1, <?php echo $pageid;?>) + ' km'); }); <?php endwhile; wp_reset_query(); ?> </script> 

this works im sure there nicer way fix this.