title: Loading latitude/longitude from MySQL database and showing point on Google Maps using PHP,html and JavaScript
body: <p>I googled a lot but all the solutions i found didn't work for me (even google maps tutorial). I have a MySQL database where I store latitude and longitude values in Float type columns. I wrote php script which connects to the database and selects those values. The idea is that php script passes an array of longitude and latitude values to JavaScript and then Javascript iterate on that array making new markers on Google Maps. Here is my actual code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
   &lt;style&gt;
         #map {
          width: 100%;
          height: 700px;        
          background-color: grey;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  &lt;?php 
    
  $query ="SELECT latitude,longitude FROM markers"; 
   
   
  
  $result_array=Array();
  
  $con = new mysqli($host, $user, $password, $dbname, $port)
   or die ('Could not connect to the database server' . mysqli_connect_error()); 
  
  $result = mysqli_query($con,$query);
          while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
           $latitude=$row['latitude'];
     $longitude=$row['longitude'];
         $result_array[]=array('latitude'=&gt;$latitude,'longitude'=&gt;$longitude);
  }
          
    $json=json_encode($result_array);
  $con-&gt;close();
  
  ?&gt;
  &lt;h3&gt;MyMap&lt;/h3&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        function initMap() {
          var mapDiv = document.getElementById('map');
          var map = new google.maps.Map(mapDiv, {
              center: {lat: 41.5400 , lng: 12.2500},
              zoom: 6
          });
    var array="&lt;?php echo $json_array;?&gt;";
    
    for(var i=0;i&lt;array.length;i++){
     var myLatLng=new google.maps.LatLng(lat,lon);
     var marker=new google.maps.Marker({
      map:map,
      position: myLatLng,
     });
    //}
    
      }
   &lt;/script&gt;
   &lt;script async defer
          src=MY GOOGLE API MAP&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone help me or suggest other ways to do the same thing?</p>