php - WordPress Loop and Google Maps Api query
Get the solution ↓↓↓I have created a custom post with custom fields that give me the Lat and Lons of my locations.
I am needing a way to populate a map with all location marker showing for each location.
When a user selects a location the map needs to still show all locations on the map but the selected/active pin needs to change icon. I can only show one location at a time with the approach I have made below:
How the user selects a location:
<?php
$args = array( 'post_type' => 'office_locations', 'posts_per_page' => -1, 'order_by' => 'title', 'order' => 'ASC' );
$loop = new WP_Query( $args ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<option<?php echo (isset($_POST['selectedValue']) && $_POST['selectedValue'] == get_the_title() ? ' selected' : null) ?>><?php echo get_the_title();?></option>
<?php endwhile; ?>
I then get my selection location like so:
<?php
if( $_POST['selectedValue'] == $_POST['selectedValue'] ){
$location = $_POST['selectedValue'];
}
?>
How the map utilises the data from the loop:
I reopen the loop:
<?php $args = array( 'post_type' => 'office_locations', 'posts_per_page' => 1, 'title' => $location ); $loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$lat = get_field( "lat" ); // Lattitude
$lon = get_field( "lon" ); // Longitude
My Google map markers and mappings:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 53.381129, lng: -1.470085}
});
var icon = {
url: "http://www.clker.com/cliparts/0/V/t/A/W/N/google-maps-gris-hi.png",
scaledSize: new google.maps.Size(40, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var <?php echo preg_replace('/\s+/', '', $location); ?> = new google.maps.Marker({
position: {lat: <?php echo $lat; ?>, lng: <?php echo $lon; ?>},
map: map,
icon: icon
});
}
From here I am unsure on how to display all of the markers on the map at once, and then upon selection replacing the active icon/marker with another image.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: too few arguments to function laravel
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.