I've created the following code to show me some markers on GMaps. If i delete the code
var locations = [
<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];
the Gmaps shows up.
If i add the code the page returns blank. Main goal is to run a query which results into a lat/lng information. That information had the create a marker on GMaps
Complete code:
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Agents</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBPjiZ-mcRgK6jV00orSHefk6L40gsznkk&sensor=false&language=nl®ion=nl"></script>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<?php
include ("dblogin.php")
// Alle klanten ophalen
$query = "SELECT MachineId as name, [value17] as lat ,[value18] as lng, ast.online as state FROM [ksubscribers].[dbo].[vAuditMachineSummary] left join ksubscribers.dbo.agentState as ast on ast.agentGuid = vAuditMachineSummary.agentGuid where [value17] is not null";
$data = mssql_query($query);
// Door alle klanten lopen
while($row = mssql_fetch_array($data))
{
// Een array opbouwen met de klant naam en coördinaten
// (welke nog even van een komma naar een punt veranderd worden)
$location[] = '['.$row['name'].'","'.($row['lat']).'","'.($row['lng']).'"","'.($row['state']).']';
}
?>
<script type="text/javascript">
// De array met gegevens in Javascript
var locations = [
<?=implode(',',$locations); // De in PHP gemaakte array samenvoegen tot een regel gescheiden door komma's ?>
];
// Nieuwe cq mooiere visuele weergave gebruiken
google.maps.visualRefresh = true;
// Functie die aangesproken wordt zodra de pagina geladen is
function initialize()
{
// Kaart opties
var mapOptions = {
center: new google.maps.LatLng(52.23, 4.55), // Coördinaten van centraal Nederland
zoom: 8, // Inzoomen zodat Nederland goed zichtbaar is
mapTypeId: google.maps.MapTypeId.ROADMAP // De wegenkaart gebruiken
};
// Kaart laden in div met het ID map-canvas
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// De "markers" plaatsen
setMarkers(map,locations);
}
// De array met gegevens in Javascript
//var loc = [
// <?php=implode(',',$location);?>
//];
// Functie die de "markers" plaatst op de kaart
function setMarkers(map,locations)
{
// De afbeelding voor de klanten op de kaart
var image = 'http://icons.iconarchive.com/icons/icons-land/vista-people/24/Office-Customer-Male-Light-icon.png';
// Door alle klanten lopen
for (var i = 0; i < locations.length; i++)
{
// De coördinaten ophalen
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
// De "marker" plaatsen
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: loc[0]
});
}
}
// Zodra de pagina is geladen de initialize functie aanspreken
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
