TL;DR: I have a MySQL table called company with 2 fields (lat, long) that I want to retrieve to load the address in Google Maps. So my function initMap(lat, long) in the file map.js needs those two arguments.
How can I pass those values after the AJAX call to the JS function that loads the map?
AJAX Function
function searchCompany() {
$.ajax({
type: 'post',
url: 'ajax/search-company.php',
data: {
data:idComp
},
success: function (response) {
document.getElementById("company").innerHTML=response;
// CALL INITMAP() HERE!
}
});
}
Google Maps script tag
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
</script>
<script src="js/map.js"></script>
Map.js
function initMap(lat, long) {
var location= new google.maps.LatLng(lat, long);
var mapEl= document.getElementById('map');
var mapOpt= {
center: location,
zoom: 15,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapEl, mapOpt);
// Add marker
var imgMarker= {
url: 'img/marker.png',
scaledSize: new google.maps.Size(50, 50)
}
var marker= new google.maps.Marker({
position: location,
map: map,
icon: imgMarker
});
var contentString= '<div class="info-window">'+
'<h3>Info</h3>'+
'<div class="info-content">'+
'<p>Text</p>'+
'</div>'+
'</div>';
var infoWindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
mark.addListener('click', function() {
infoWindow.open(map, marker);
});
}