在PHP中调用AJAX后加载Google Maps选项

在PHP中调用AJAX后加载Google Maps选项

问题描述:

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);
});
}

Your backend needs to return json for you to grab with jQuery's ajax

<?php
....
$result = ['lat'=>12.34, lng=>56.78];

echo json_encode($result);

then you can receive it as an object instead of html

$.ajax({
  type: 'post',
  url: 'ajax/search-company.php',
  dataType:'json',
  data: {
     data:idComp
  },
  success: function (response) {
    // response is an object with lat and lng properties
    initMap(response.lat, response.lng);
  }
});

Why don't you just return coordinates in json. Do not return whole html for that piece of the page. After you got your coordinates simply reinit your map.