Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing AJAX to dynamically draw circles with Google Maps
    text
    copied!<p>I am playing around with some geographical data, using the Google Maps API to generate circles on a map. Easy. The data is coming from a MySQL database and I am using PHP to print this into the script on loading. The structure of the JavaScript object looks like this:</p> <pre><code>var circles = { 1 : { center : new google.maps.LatLng(55,-1), size: 1000}, 2 : { center : new google.maps.LatLng(56,-2), size: 2000} }; </code></pre> <p><strong>Goal</strong></p> <p>The circles are not arbitrary and the locations they represent have associated characteristics which I would like to filter on. Assume a drop down box allows you to select the size range of the circles displayed on the map. When changed, the map will reload the circles based on this selection.</p> <p>I have created a PHP script which generates the data and have tried to use AJAX (jQuery) to assign the response to the circles variable, as shown below. When I have cracked it the idea is that the script will generate different data based on the drop down selection. </p> <pre><code>var circles = {}; var circles = $.ajax({ url: "data.php", async: false }).responseText; </code></pre> <p>The text that the PHP (data.php) script generates is this:</p> <blockquote> <p>1 : { center : new google.maps.LatLng(55,-1), size: 1000},2 : { center : new google.maps.LatLng(56,-2), size: 2000}</p> </blockquote> <p>However, this does not work. I may be missing a step or be on the wrong track but any guidance would be welcomed.</p> <p>Thanks in advance!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload