title: How can I set points on google maps, using php and locations from database?
body: <p>I have a database and a table named markers. In this table there are the coordinates of specific locations that I want to mark on a map using Google maps. I can set the map on my website but when I try to use php to mark the locations I get this error "Uncaught TypeError: Cannot read property 'offsetWidth' of null".</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;X&lt;/title&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/estilos.css" rel="stylesheet"&gt;
  
      &lt;style type="text/css"&gt;
              #map {
                  width:  100%;
                  height: 700px;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&amp;sensor=false"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
           $(document).ready(function(){
              google.maps.event.addDomListener(window, 'load', init);
  
  
                   function init() {
                       var mapOptions = {                                    
                      zoom: 15,
                      center: new google.maps.LatLng(40.2118735,-8.4240415,16);
                      styles: [   {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]},  {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]},    {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]},    {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]},   {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]},    {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]},    {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
                  };
  
                  var mapElement = document.getElementById('map');
  
                  var map = new google.maps.Map(mapElement, mapOptions);   
                   }
                  });
  
  
          &lt;/script&gt;
  
    &lt;/head&gt;
  &lt;?php
      include ('headbar.php');
      require ('conexao.php');
      $getpoints = mysql_query("SELECT * FROM markers");
      if(!$result = $con-&gt;query($getpoints)){die('There was an error running the query [' . $con-&gt;error . ']');
        } else {
          while ($row = $result-&gt;fetch_assoc()) {
       echo 'var myLatlng1 = new google.maps.LatLng('.$row[lat].', '.$row[lng].'); 
                  var marker1 = new google.maps.Marker({ position: myLatlng1, map: map, title:"'.$row[name].'"});';
      }
    }
  ?&gt;
      &lt;body&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can't figure out what the problem is, and I would appreciate some help with this.</p>