How to add google map with marker on my website?

I am trying to add google map on my web page but it does not appear on my page.I have tried too much also try this Adding google maps to my website but still unable to find the solution. If anyone know please guide me. Here is my code.

function myMap() {
var idmy = $("#txtSaloonId").val();
$.post('ajax/location.php', {id: idmy}, function(data, textStatus, xhr) {

    var array = data.split(",");
    //$("#txttest").val(array);

     var myCenter = new google.maps.LatLng(array[0],array[1]);
    var mapCanvas = document.getElementById("map");

       var mapOptions = {center: myCenter, zoom: 10};
    var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
      marker.setMap(map);

     // Zoom to 9 when clicking on marker
  google.maps.event.addListener(marker,'click',function() {
  map.setZoom(14);
 map.setCenter(marker.getPosition());
  });
 });

 }
</script>

 <script src="https://maps.googleapis.com/maps/api/js? 
 key=AIzaSyDM5dzCh6JBRwk9RtagVFzW0qhWEn9o6Zs&callback=myMap"></script>

Here is my location.php file

<?php

$salonId = $_GET['SaloonId'];

 $q = "select * from saloon where id = '$id';";
 $res = mysqli_query($conn,$q);

if ($row = $res->fetch_array()) {
echo  $row['latitude'];
echo ',';
echo  $row['longitude'];


}
?>