Google map posts using meta values

I’m trying to create a map that will show posts based on the meta values for lat and long.

I’m running into a wall because both latitude and longitude are meta keys and the code below is only outputting one meta value per entry. So it’s creating two entries per post, one with lat and one with long.

Any advice would be greatly appreciated

<?php
$lat = 'latitude';
$long = 'longitude';
    $results = $wpdb->get_results( "
        SELECT
            post_title,
        meta_value
        FROM {$wpdb->posts}
            INNER JOIN {$wpdb->postmeta}
        ON ( $wpdb->posts.ID = {$wpdb->postmeta}.post_id )
        WHERE meta_key = '$lat'
        OR meta_key = '$long'
    " );

    foreach( $results as $result )
    {
        printf( '<pre>%s</pre>', htmlspecialchars( var_export( $result, true ) ) );
    }

?>

<style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 350px; width:100%; }
    </style>

  <script type="text/javascript">

// MAP

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 53.343156, lng: -6.258545},
    scrollwheel: false
  });

  setMarkers(map);
}

// LOCATIONS

var locations = [
<?php

    foreach( $results as $result ) {

        echo "\t\t\t['"
             . str_replace("'", "\'", $result[0])
             . "', " . $result[1]
             . ", '" . $result[3] . "'"
             . "],\n";
    } ?>            ];

function setMarkers(map) {
  // Adds markers to the map.

  for (var i = 0; i < results.length; i++) {
    var result = results[i];
    var marker = new google.maps.Marker({
      position: {lat: result[1], lng: result[2]},
      map: map,
      title: result[0]
    });
  }
}
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
    </script>