WordPress循环和谷歌地图Api查询

Question

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.