title: Google Maps API markers not showing - with MySQL and JSON
body: <p>I am building an app that shows places as a marker on google map. I got the geolocation marker working, but I can't manage to let the markers with the coordinates from the database show up.</p>
  
  <p><strong>This is the places.php file where I connect to the database and execute the query.</strong></p>
  
  <pre><code>header('Content-Type: application/json');
  $response['success'] = false;
  $link = new PDO('mysql:host=HOST;dbname=DATABASE', 'USERNAME', 'PASSWORD');
      $stmt = $link-&gt;prepare("SELECT name, description, lat, lng FROM places");
      $stmt-&gt;execute();
      $result = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);    
      if(!empty($result)) {
          $response['success'] = true;
          $response['data'] = $result;
      }
      echo json_encode($response);
  </code></pre>
  
  <p>Places.php outputs this: </p>
  
  <pre><code>{"success":true,"data":[{"name":"Wim's Camping spot","description":"Large garden with nice grass. Shower available.","lat":"51.00199890137","lng":"4.47925186157"},{"name":"Bij Laurens &amp; Kenzo","description":"Large garden with nice grass.","lat":"50.97788238525","lng":"4.47482204437"},{"name":"Oxford Street","description":"Large garden with nice grass. Shower available.","lat":"51.51498031616","lng":"-0.14432799816"}]}
  </code></pre>
  
  <p><strong>This is the script I'm using in the file where I initalize the map.</strong>
  Based on this tutorial: <a href="http://wsnippets.com/responsive-airbnb-style-google-map-property-listing-using-ajax-php-mysql-and-twitter-bootstrap/" rel="nofollow">http://wsnippets.com/responsive-airbnb-style-google-map-property-listing-using-ajax-php-mysql-and-twitter-bootstrap/</a></p>
  
  <pre><code>var i = 1,
  bounds,
  marker,
  markersArray = Array();
  
  $(window).ready(function(e){
      initialize();
  });
  
  function initialize() {
      navigator.geolocation.getCurrentPosition(function(position) {
          var mapOptions = {
              center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('js-map-container'), mapOptions);
          map.setZoom(10);
  
  
          var image = 'images/marker-current.png';
          var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var currentPosMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
            });
            getMapData();
       })  
  }
  
  function getMapData(){
      $.getJSON('places.php',function(data){
      if(data.success == true) {
          if(data.data.length &gt; 0){
              $.each(data.data,function(index, value){
                  name = data.data[index].name;
                  description = data.data[index].description;
                  lat = data.data[index].latitude;
                  lng = data.data[index].longitude;
                  addMarker(i, name, description, lat, lng);
                  i++;
              });
          }
      }
  }); 
  }
  
  
  
  
  function addMarker(i, name, description, lat, lng) {
  if (lat != null &amp;&amp; lng != null) {
      myLatLng = new google.maps.LatLng(lat, lng);
      bounds = new google.maps.LatLngBounds();
      eval('var marker' + i + ' = new google.maps.Marker({ position: myLatLng,  map: map, zIndex: i});');
      var marker_obj = eval('marker' + i);
      bounds.extend(marker_obj.position);
      markersArray.push(eval('marker' + i));
      marker_obj.title = name;
      var li_obj = '.js-map-num' + i;
      var content = '&lt;div class=""&gt;&lt;h4&gt;' + name + '&lt;/h4&gt;&lt;h4&gt;&lt;span class="label label-danger"&gt; $'+ description +'&lt;/span&gt;&lt;/h4&gt;&lt;/div&gt;';
      eval('var infowindow' + i + ' = new google.maps.InfoWindow({ content: content,  maxWidth: 370});');
      var infowindow_obj = eval('infowindow' + i);
      var marker_obj = eval('marker' + i);
      google.maps.event.addListener(marker_obj, 'click', function () {
          infowindow_obj.open(map, marker_obj);
      });
    }
  }
  </code></pre>