title: Gather the Co-Ordinates & Draw them to Google Map
body: <p><br/>
  I'm trying to gather several coordinates from a php file and draw them to a google map making several markers. The data are gathered using the <code>.ajax</code> method of the <code>jquery</code> library. Here is my attempt:</p>
  
  <p>allCoordinates.php:
      
  
  <pre><code>$db_host = "localhost";
  $db_user = "root";
  $db_password = "root";
  $db_database = "googlemapsdemo";
  
  $connection = new mysqli($db_host, $db_user, $db_password, $db_database);
  
  if (mysqli_connect_errno()) {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
  
  $selectvalue = mysqli_real_escape_string($connection, $_GET['svalue']);
  
  mysqli_select_db($connection, $db_database);
  
  $result = mysqli_query($connection, "SELECT latitude, longitude FROM googlemapsdemo.vtiger_geocoding", MYSQLI_USE_RESULT);
  
  $rows = array();
  
  while ($allCoordinates = mysqli_fetch_array($result)){
      $rows[] = array('latitude' =&gt; $allCoordinates[0], 'longitude' =&gt; $allCoordinates[1]);
  }
  
  $json = json_encode($rows);
  print $json;
  
  
  
  mysqli_free_result($result);
  mysqli_close($connection);
  
  ?&gt;
  </code></pre>
  
  <p>index.php:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google Maps Demo&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"&gt;&lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
          var coordinates, parsedCoordinates;
          var mapCenter = new google.maps.LatLng(51.508742,-0.120850); //Google map Coordinates
          var map;
          map_initialize(); // load map
  
          function map_initialize(){
  
              //Google map option
              var googleMapOptions = 
              { 
                  center: mapCenter, // map center
                  zoom: 17, //zoom level, 0 = earth view to higher value
                  panControl: true, //enable pan Control
                  zoomControl: true, //enable zoom control
                  zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL //zoom control size
              },
                  scaleControl: true, // enable scale control
                  mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
              };
  
              map = new google.maps.Map(document.getElementById("map_container"), googleMapOptions);
  
              var marker = new google.maps.Marker({
                  position: mapCenter,
                  map: map
              });
  
              var infowindow = new google.maps.InfoWindow({
                  content:"Hello World!"
              });
  
              infowindow.open(map,marker);
          }
  
          $(':submit').on('click', function() { // This event fires when a button is clicked
              $.ajax({ // ajax call starts
                    url: 'allCoordinates.php', // JQuery loads allCoordinates.php
                    dataType: 'json', // Choosing a JSON datatype
                    success: function(data) // Variable data contains the data we get from serverside
                    {
                        alert(data[0].latitude + " " + data[0].longitude);
                        coordinates = data;
                        parsedCoordinates = JSON.parse(coordinates);
                        update(parsedCoordinates);
                    }
              });
              return false; // keeps the page from not refreshing 
          });
  
          function update(markers){
              var infowindow = new google.maps.InfoWindow(), marker, i;
  
              google.maps.event.addListener(map, 'center_changed', function(event){
                  for (i = 0; i &lt; markers.length; i++) {  
                      marker = new google.maps.Marker({
                          position: new google.maps.LatLng(markers[i].latitude, markers[i].longitude),
                          map: map
                      });
  
                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
  
                          return function() {
                              infowindow.setContent(markers[i].latitude + " " + markers[i].longitude);
                              infowindow.open(map, marker);
                          }
                      })(marker, i));
                  }
              });
          }
  
      });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div id="filters_container"&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Zona&lt;/legend&gt;
                      &lt;form id="submitForm" method="post" action=""&gt;
                          &lt;select&gt;.......&lt;/select&gt;
                          &lt;button type="submit"&gt;Cerca&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/fieldset&gt;
  
          &lt;/div&gt;
          &lt;div id="map_container"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the JSON returned is this:</p>
  
  <pre><code>[{"latitude":"45.648110","longitude":"11.497398"},
  {"latitude":"45.511180","longitude":"11.511070"},
  {"latitude":"45.649630","longitude":"12.304064"},
  {"latitude":"45.722110","longitude":"11.435023"},
  {"latitude":"45.391083","longitude":"11.276997"},
  {"latitude":"45.691465","longitude":"11.483223"},
  {"latitude":"45.659787","longitude":"11.795147"},
  {"latitude":"45.720608","longitude":"11.453950"},
  {"latitude":"45.718757","longitude":"11.333138"},
  {"latitude":"45.607387","longitude":"11.497138"},
  {"latitude":"46.099075","longitude":"12.160999"},
  {"latitude":"45.523017","longitude":"10.152080"},
  {"latitude":"45.408520","longitude":"10.838590"},
  {"latitude":"45.717608","longitude":"11.462909"},
  {"latitude":"45.395371","longitude":"11.274200"},
  {"latitude":"45.555142","longitude":"11.543407"},
  {"latitude":"45.693428","longitude":"11.446203"},
  {"latitude":"44.661260","longitude":"10.886416"},
  {"latitude":"45.530448","longitude":"11.499496"},
  {"latitude":"45.530448","longitude":"11.499496"},
  {"latitude":"22.318567","longitude":"114.179606"},
  {"latitude":"45.443304","longitude":"10.952222"},
  {"latitude":"45.836699","longitude":"12.014122"},
  {"latitude":"45.803245","longitude":"11.355629"},
  {"latitude":"45.722110","longitude":"11.435023"},
  {"latitude":"45.803245","longitude":"11.355629"},
  {"latitude":"45.836699","longitude":"12.014122"},
  {"latitude":"45.779430","longitude":"11.429520"},
  {"latitude":"45.803245","longitude":"11.355629"}]
  </code></pre>
  
  <p>The problem is that nothing changes; what am I doing wrong? Thanks!</p>