Google map with php ajax request in bootstrap modal

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<div class="container business-setup">
    <div class="row">
        <div class="col-sm-12">
            <h1 class="font-200">Business Setup</h1> <hr>
        </div>
    </div>   
    <form action="" class='form-horizontal'>
    <div class="row business-profile">
        <div class="col-md-9">
            <div class="panel panel-default bmd-floating">
                <div class="panel-body">
                    <div class="bmd-card-caption">
                        <h2 class="font-200 no-margin">Location</h2> <hr>
                        <div class="form-horizontal">               
                            <div class="col-sm-12">
                                <div class="form-group">
                                        <div class="col-sm-12">
                                            <a href="#" onclick="editBusinessLocation()" data-toggle="modal" data-target="#ajax-modal" data-backdrop="static">Edit</a> |
                                      </div>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>
            </div>   
    </div>
    </div>
    </form>
</div>
   
<div id="ajax-modal" class="modal fade" tabindex="-1" style="display: none; "></div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $modal = $('#ajax-modal');
function editBusinessLocation() {
    $modal.load('edit_location.php');
    console.log('here');
   
}
/*
$modal.on('shown.bs.modal', function () {
   
    google.maps.event.addDomListener(window, 'load', initialize);
}); */
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>




edit_location.php
<div class="modal-dialog bmd-modal-dialog">
        <div class="modal-content bmd-border-primary">
            <div class="modal-header bmd-bg-primary">
                <button type="button" class="close btn-link bmd-flat-btn bmd-flat-btn-light" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title bmd-text-blue-100">Edit Business Location</h4>
            </div>
            <form action="" class='form-horizontal'>
            <input type="hidden" name="hidLocationID" id="hidLocationID">
            <div class="modal-body">
                <div class="form-group">
                    <div class="col-sm-12">
                        <label for="company name"><span class="text-danger"> * </span>Street Address:</label>
                        <div id="locationAddresserror" class="field-group has-feedback">
                            <span class="form-control-feedback" aria-hidden="true">
                                <i class="material-icons">location_on</i>
                            </span>
                            <input type="text" name="txtLocationAddress" id="txtLocationAddress" class="form-control" placeholder="Enter Address">
                            <span class="error_address"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <label for="company name">Street Address 2:</label>
                        <div class="field-group has-feedback">
                            <span class="form-control-feedback" aria-hidden="true">
                                <i class="material-icons">pin_drop</i>
                            </span>
                            <input type="text" class="form-control" id="txtLocationAddress1" name="txtLocationAddress1" placeholder="Enter Address (Optional)">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-5">
                        <div id="locationStateerror" class="">
                            <label for="company name"><span class="text-danger"> * </span>State:</label>
                            <select class="form-control" id="cmbLocationState" name="cmbLocationState" onchange="SelectCity(this.value, 'cmbLocationCity')">
                                <option value="0">Select</option>
                            </select>
                        </div>
                        <span class="error_state"></span>
                        <br>
                        <div id="locationCityerror" class="">
                            <label for="company name"><span class="text-danger"> * </span>City</label>
                            <div id="selectcity">
                                <select class="form-control" id="cmbLocationCity" name="cmbLocationCity">
                                    <option value="0">First Select State</option>
                                </select>
                            </div>
                        </div>
                        <span class="error_city"></span>
                        <br>
                        <label for="company name"><span class="text-danger"> * </span>Zip Code</label>
                        <div id="locationZiperror" class="field-group has-feedback">
                            <span class="form-control-feedback" aria-hidden="true">
                                <i class="material-icons">my_location</i>
                            </span>
                            <input type="text" class="form-control" id="txtLocationZip" name="txtLocationZip" placeholder="Enter Zipcode">
                            <span class="error_zip"></span>
                        </div><br>
                        <label for="company name"><span class="text-danger"> * </span>Phoen Number on this location</label>
                        <div id="locationPhoneerror" class="field-group has-feedback">
                            <span class="form-control-feedback" aria-hidden="true">
                                <i class="material-icons">pin_drop</i>
                            </span>
                            <input type="text" class="form-control" id="txtLocationPhone" name="txtLocationPhone" placeholder="Enter Location Phone Number">
                            <span class="error_phone"></span>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div id="map"></div>
                    </div>
                   
                    <div class="col-sm-12">
                            <div class="form-group">
                                <div class="col-sm-8">
                                    <div id="mapCanvas" style="width: 500px;height: 500px"></div>
                                </div>
                                <div class="col-sm-4 ">
                                 <div id="infoPanel" class="well">
                                    <div id="markerStatus" style="font-size: 0px;"><i>Click and drag the marker.</i></div>
                                    <b>Current position:</b>
                                    <div id="info"></div>
                                    <b>Closest matching address:</b>
                                    <div id="map_address"></div>
                                  </div>
                                        <label for="company name">Latitude:</label>
                                        <div class="field-group has-feedback">
                                            <span class="form-control-feedback" aria-hidden="true">
                                                <i class="material-icons">pin_drop</i>
                                            </span>
                                            <input type="text" class="form-control not-active" id="txtLocationLatitude" name="txtLocationLatitude" placeholder="Enter Latitude">
                                        </div>
                                        <label for="company name">Logitude :</label>
                                        <div class="field-group has-feedback">
                                            <span class="form-control-feedback" aria-hidden="true">
                                                <i class="material-icons">pin_drop</i>
                                            </span>
                                            <input type="text" class="form-control not-active" id="txtLocationLogitude" name="txtLocationLogitude" placeholder="Enter Logitude">
                                        </div>
                                </div>
                            </div>
                        </div>
                   
                </div>
            </div>
            <div class="modal-footer bmd-border-blue-100">
                <button type="button" class="btn btn-default bmd-ripple bmd-ink-grey-400" data-dismiss="modal">Close</button>
                <button type="submit" name="btnAddressUpdate" id="btnAddressUpdate" onclick="editLocation()" class="editLocation btn btn-primary bmd-ripple">Save</button>
            </div>
            </form>
        </div>
    </div>
   
    <script type="text/javascript">
    function updateMarkerAddress(str) {
  document.getElementById('map_address').innerHTML = str;
}
function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
        //var place = responses[0].address_components[6].long_name;
        //var city  = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
        //alert(''+place);
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}
var locationsw = [
['Coogee Beach', -33.923036, 151.259052, 5],
];

var mapw = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myOptions = {

autoScroll: false,
boxStyle: {
opacity: 0.75,
width: "280px"
}
};

var infowindow = new google.maps.InfoWindow(myOptions);
var i,marker;
for (i = 0; i < locationsw.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locationsw[i][1], locationsw[i][2]),
map: mapw,
borderRadius: 20,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
 
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
 
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
    setLatLng(marker.getPosition());
  });
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locationsw[i][0]);
infowindow.open(mapw, marker);
}
})(marker, i));
}
</script>