title: Google maps, display mysql information in marker info window
body: <p>I have two mysql tables: "cars" and "locations".</p>
  
  <p>Cars are assigned to a locations by having field "location_id" in "cars" table. I am showing locations in a google maps retrieving coordinates from "locations" table.</p>
  
  <p>What I would like to do, is to show in info window of google maps marker (which mark a location) which cars are assigned to this location.</p>
  
  <p>I use get_locations.php with this code to retrieve information from DB:</p>
  
  <pre><code>  $query_cars = "SELECT * FROM cars where location_lat not like ''";
    $cars = $db-&gt;query($query_cars);
    $row_cars = $cars-&gt;fetchAll(PDO::FETCH_ASSOC);
  
    $query_locations = "SELECT id, name, gpslat, gpslong FROM locations where name not like '%/ Zona%' and status='Activa'";
    $locations = $db-&gt;query($query_locations);
    $rowLocations = $locations-&gt;fetchAll(PDO::FETCH_ASSOC);
  
    echo json_encode($rowLocations);
  </code></pre>
  
  <p>Than I call this script from html page with this code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=API KEY"&gt;
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
        function makeRequest(url, callback) {
          var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
            } else {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
            }
            request.onreadystatechange = function() {
                if (request.readyState == 4 &amp;&amp; request.status == 200) {
                    callback(request);
                }
            }
          request.open("GET", url, true);
          request.send();
        }
  
        var geocoder = new google.maps.Geocoder();
        var infowindow = new google.maps.InfoWindow();
  
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(40.430013, -3.695854),
            zoom: 12
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);
  
          makeRequest('get_locations.php', function(data) {
              var data = JSON.parse(data.responseText);         
              for (var i = 0; i &lt; data.length; i++) {
                displayLocation(data[i]);
              }
          });
  
          var image = 'http://www.bluemove.es/equipo/images/car_location_Normal.png';
  
          function displayLocation(location) {
            var content = '&lt;div class="infoWindow"&gt;' + location.name; // content of the pop up window
            if (parseInt(location.gpslat) == 0) {
                geocoder.geocode( { 'address': location.address }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
  
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: results[0].geometry.location,
                            title: location.name,
                            incon: image
                        });
  
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.setContent(content);
                            infowindow.open(map,marker);
                        });
                    }
                });
            } else {
                var position = new google.maps.LatLng(parseFloat(location.gpslat), parseFloat(location.gpslong));
                var marker = new google.maps.Marker({
                    map: map, 
                    position: position,
                    title: location.name,
                    icon: image
                });
  
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                });
            }
          }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="map-canvas"/&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>So when marker is clicked, the location name is displayed on the info window. But as I said I also want to display car name that are assigned to this location.</p>
  
  <p>Does anybody have any idea?</p>
  
  <p>Thank you!</p>