wordpress - Stuck in plotting Coordinates in Google Map -

wordpress - Stuck in plotting Coordinates in Google Map -

i' using wordpress create application plot voyage journey on google map. here website illustration of mean.

wordpress query info voyage

<?php $args = array( 'post_type' => "track-the-voyage", 'posts_per_page' => -1, 'order' => 'desc', 'post_status' => 'publish' ); $voyage_query = query_posts($args); $total = $wp_query->found_posts; ?>

now, making google map dynamic , plotting multiple coordinates

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasyc6yp3d4z-magfbpfxzrr1pbdv7w6mqfl8&sensor=false"></script> <script type="text/javascript"> var centerlatlng = new google.maps.latlng(0, -180); <?php $i = 0; foreach( $voyage_query $voyage ){ $voyage_id = $voyage->id; $voyage_date_time = get_post_meta( $voyage_id, "date-time" ); $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" ); $voyage_course = get_post_meta( $voyage_id, "course" ); $voyage_speed = get_post_meta( $voyage_id, "speed" ); $voyage_latitude = get_post_meta( $voyage_id, "latitude" ); $voyage_latitude = $voyage_latitude[0]; $voyage_longitude = get_post_meta( $voyage_id, "longitude" ); $voyage_longitude = $voyage_longitude[0]; ?> var latlng<?php echo $voyage_id; ?> = new google.maps.latlng( <?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?> ); <?php } ?> function initialize() { var mapoptions = { zoom: 3, center: centerlatlng, disabledefaultui: false, maptypeid: google.maps.maptypeid.terrain, scalecontrol: true }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var voyageplancoordinates = [ <?php foreach( $voyage_query $voyage ){ $voyage_id = $voyage->id; $voyage_date_time = get_post_meta( $voyage_id, "date-time" ); $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" ); $voyage_course = get_post_meta( $voyage_id, "course" ); $voyage_speed = get_post_meta( $voyage_id, "speed" ); $voyage_latitude = get_post_meta( $voyage_id, "latitude" ); $voyage_latitude = $voyage_latitude[0]; $voyage_longitude = get_post_meta( $voyage_id, "longitude" ); $voyage_longitude = $voyage_longitude[0]; ?> new google.maps.latlng(<?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?>), <?php } ?> ]; var voyagepath = new google.maps.polyline({ path: voyageplancoordinates, geodesic: true, strokecolor: '#ff0000', strokeopacity: 1.0, strokeweight: 5 }); voyagepath.setmap(map); setmarkers(map, voyages); } var voyages = [ <?php foreach( $voyage_query $voyage ){ $voyage_id = $voyage->id; $voyage_post_title = get_the_category( $voyage_id ); $voyage_post_title = $voyage_post_title[0]->cat_name; $voyage_date_time = get_post_meta( $voyage_id, "date-time" ); $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" ); $voyage_course = get_post_meta( $voyage_id, "course" ); $voyage_speed = get_post_meta( $voyage_id, "speed" ); $voyage_latitude = get_post_meta( $voyage_id, "latitude" ); $voyage_latitude = $voyage_latitude[0]; $voyage_longitude = get_post_meta( $voyage_id, "longitude" ); $voyage_longitude = $voyage_longitude[0]; ?> ['<?php echo $voyage_post_title; ?>', <?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?>], <?php } ?> ]; function setmarkers(map, locations) { var image = {url: '/wp-content/themes/muavoyage/resources/images/marker.png', size: new google.maps.size(20, 32), origin: new google.maps.point(0,0), anchor: new google.maps.point(0, 32) }; var shape = { coords: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; (var = 0; < locations.length; i++) { var voyage = locations[i]; var mylatlng = new google.maps.latlng(voyage[1], voyage[2]); var marker = new google.maps.marker({ position: mylatlng, map: map, icon: image, shape: shape, title: voyage[0], zindex: voyage[3] }); } } google.maps.event.adddomlistener(window, 'load', initialize); </script> <div id="map-canvas"></div>

my problem

when run above, results, totally wrong. missing here. . want accomplish goto website

if see on reference link have like

var centerlatlng = new google.maps.latlng(-14.274792,-170.692975); var latlng0001 = new google.maps.latlng( 19.73251, -155.05240); var latlng0002 = new google.maps.latlng( 18.90872, -155.68050); var latlng0003 = new google.maps.latlng( 20.78842, -156.50975); var latlng0004 = new google.maps.latlng( 20.52511, -156.70608); var latlng0005 = new google.maps.latlng( 20.74118, -156.88468); var latlng0006 = new google.maps.latlng( 21.08046, -157.02995);

make var latlng array placing latlng[] variable having coordinates.and create rest of changes accordingly

ps : google "adding multiple markers on google map"

wordpress google-maps