Databases
StackOverflow2013
Postsdbo
PODisplay multiple markers in Google Maps using jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisplay multiple markers in Google Maps using jquery
    text
    copied!<p>I'm trying to display multiple markers in my map once a region is selected. I am getting the correct coordinates but I cannot display the markers. I don't know what's missing or what's wrong in my code. Any help would be much appreciated.</p> <p>Here is my script:</p> <pre><code>var region; var map; function getPoints(id){ var str = $.ajax({ url: 'getPoints.php/'+id, async: false, data: {"id":id}, dataType: "json", type: 'POST', }).responseText; return str; } function initialize() { var mapOptions = { center: new google.maps.LatLng(15.583333,121.966667), zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function setMarkers(map, points){ for (var i=0; i&lt;points.length; i++) { //console.log("lat= " + points[i].lat + " ,lon= " + points[i].lon); var latlngset; latlngset = new google.maps.LatLng(points[i].lat, points[i].lon); console.log(latlngset); var marker = new google.maps.Marker({ map: map, position: latlngset }); } } google.maps.event.addDomListener(window, 'load', initialize); $(document).ready(function(){ $("#region").change(function(){ region = $("#region").val(); $.ajax({ type:"post", url:"getDivision.php", data:"region="+region, success: function(data) { $("#division").html(data); } }); }); $('form[name="thisform"]').submit(function(event){ var points = getPoints(region); points = JSON.parse(points); setMarkers(map, points); }); }); </code></pre> <p>Here is the HTML part</p> <pre><code>&lt;form name="thisform"&gt; &lt;select name="region" id="region"&gt; &lt;option&gt;--Select Region--&lt;/option&gt; &lt;?php $query = "SELECT * FROM region " ; $result = mysql_query($query) or die(mysql_error()); while($row = mysql_fetch_array($result)){ echo "&lt;option value='".$row['region_id']."'&gt; ".$row['region_name']." &lt;/option&gt; "; } ?&gt; &lt;/select&gt; &lt;input type="submit" name="submit" value="OK"&gt; &lt;/form&gt; &lt;div id="map-canvas"&gt;&lt;br&gt;&lt;br&gt; </code></pre> <p>I am getting this JSON</p> <pre><code>[Object { lat="10.6733", lon="122.993"}, Object { lat="10.6941", lon="122.319"}, Object { lat="11.1555", lon="122.502"}] </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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