title: fetch data from database and plot it on google map
body: <p>i have an index page that has 2 drop down. second dropdown depends on the first one, after selecting a value from the second list, a search is performed through the database table acc to the value selected and then the matching result is displayed. what i want is that the result that is getting dispalyed(in this case the latitude and longitude corresponding the result) should be shown on google map</p>
  
  <p>code that i have so far</p>
  
  <p>Code on the main page that contains the dropdown and will display the map </p>
  
  <pre><code>&lt;div class="showsearch" id="gmap_canvas"&gt;  //place where the ,ap should get displayed
  &lt;/div&gt; 
  </code></pre>
  
  <p>Code that performs the search to display result and should also work for map</p>
  
  <pre><code>&lt;?php
  include("connection.php");
  if(isset($_POST['fname']))
      {
          $fname = mysqli_real_escape_string($con, $_POST['fname']);
  
          $sql1 = 'SELECT * FROM features_for_office WHERE fname LIKE "%'.$fname.'%"';
          $result = mysqli_query($con, $sql1);
  
          if (mysqli_num_rows($result) &gt; 0) 
              {
                  while($row = mysqli_fetch_assoc($result)) 
                      {
                          $latitude= $row["latitude"];
                          $longitude= $row["longitude"];
                      }
                      ?&gt;
  
  
                      &lt;!-- JavaScript to show google map --&gt;
  
  
  &lt;div class="showsearch" id="gmap_canvas"&gt;&lt;/div&gt; 
          &lt;script&gt;
          function init_map(lat,lang) {
          var myOptions = {
              zoom: 14,
              center: new google.maps.LatLng(lat, lang),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
          marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(&lt;?php echo $latitude; ?&gt;, &lt;?php echo $longitude; ?&gt;)
          });
          /*infowindow = new google.maps.InfoWindow({
              content: "&lt;?php echo $formatted_address; ?&gt;"
          });*/
          google.maps.event.addListener(marker, "click", function () {
              infowindow.open(map, marker);
          });
          infowindow.open(map, marker);
      }
      function loadCoordinates(){
          var latitude;
          var longitude;
                 $('.showsearch').blur(function() {
               $.ajax({
                  type: "GET",
                  dataType: "json",
                  url: "get_search_data.php",
                  data: "name="+$(this).val(),
                  success: function(json){
                  $('#number').val(json.num);
                  }
                });
           });
          //call the function once coordinates are available from the server/
          //init_map must be called from the call back of ajax function
          init_map(latitude,longitude);
      }
      //instead of init_map call the loadCoordinates to get the values from server
      google.maps.event.addDomListener(window, 'load', loadCoordinates);
  
                          &lt;/script&gt;
  
         &lt;?php }
          else 
              {
                  echo "0 results";
              }
      mysqli_close($con);
      }
  ?&gt;
  </code></pre>
  
  <p>although i am getting the value of latitude and longitude but i am not able to display a map along with markers on specific latitude and longitudes. any help would be appreciated</p>