<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mbcdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = mysql_query("SELECT * FROM markers");
$row = mysql_fetch_array($sql);
$lat = $row['lat'];
$lng = $row['lng'];
// mimic a result array from MySQL
$result = array(array('lat'=>$lat,'lng'=>$lng));
?>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBZ2nfVhxwcAagjUeQ50NiDiN2dQDHTypA&callback=initialize">
</script>
<script type="text/javascript">
var map;
function initialize() {
// Set static latitude, longitude value
var latlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?
>);
// Set map options
var myOptions = {
zoom: 16,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
// uncomment the 2 lines below to get real data from the db
$result = mysql_query("SELECT * FROM markers");
while ($row = mysql_fetch_array($result))
echo "addMarker(new google.maps.LatLng(".$row['lat'].", ".$row['long']."),
map);";
?>
}

function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true, // enables drag & drop
animation: google.maps.Animation.DROP
});

var contentString = latLng.lat() + " , " + latLng.lng();

geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
    marker = new google.maps.Marker({
      position: latlng,
      map: map
    });
    infowindow.setContent(results[1].formatted_address);
    infowindow.open(map, marker);
  } else {
    alert('No results found');
  }
} else {
  alert('Geocoder failed due to: ' + status);
}
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>

<div class="container text-center">
 <div class="row content">
  <div class="col-md-12">
    <h1>Welcome to Mission BridCon</h1><br>
    <div id="map_canvas" style="width:100%;height:500px"></div>
  </div>
 </div>
</div>