I have two mysql tables: "cars" and "locations".
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.
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.
I use get_locations.php with this code to retrieve information from DB:
$query_cars = "SELECT * FROM cars where location_lat not like ''";
$cars = $db->query($query_cars);
$row_cars = $cars->fetchAll(PDO::FETCH_ASSOC);
$query_locations = "SELECT id, name, gpslat, gpslong FROM locations where name not like '%/ Zona%' and status='Activa'";
$locations = $db->query($query_locations);
$rowLocations = $locations->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rowLocations);
Than I call this script from html page with this code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API KEY">
</script>
<script type="text/javascript">
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 && 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 < data.length; i++) {
displayLocation(data[i]);
}
});
var image = 'http://www.bluemove.es/equipo/images/car_location_Normal.png';
function displayLocation(location) {
var content = '<div class="infoWindow">' + 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);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
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.
Does anybody have any idea?
Thank you!
