I am trying to add markers on my google maps which will show the location of all users with the status “active” and on click of the marker it displays the following results from the arrays i am getting over API
login
status
gps
This is my index.php file
<!DOCTYPE html>
<html>
<body>
<?php
$api_url = 'xxxx'; // please set your x URL
$admin_login = "xxxx"; // x administrator login
$admin_password = "xxxx"; // administrator password
$api = new SplynxAPI($api_url);
$api->setVersion(SplynxApi::API_VERSION_2);
$isAuthorized = $api->login([
'auth_type' => SplynxApi::AUTH_TYPE_ADMIN,
'login' => $admin_login,
'password' => $admin_password,
]);
if (!$isAuthorized) {
exit("Authorization failed!\n");
}
$customerApiUrl = "admin/customers/customer/";
print "<pre>";
$result_customers = $api->api_call_get($customerApiUrl);
$customers_list = $api->response;
if ($result_customers) {
} else {
print "Fail! Error code: $api->response_code\n";
print_r($api->response);
}
?>
<table>
<thead align="left" style="display: table-header-group">
<tr>
<th>CLIENT</th>
<th>STATUS</th>
<th>GPS</th>
</tr>
</thead>
<tbody>
<?php foreach($customers_list as $item) :?>
<tr class="item_row">
<td> <?php echo $item['login']; ?></td>
<td> <?php echo $item['status']; ?></td>
<td> <?php echo $item['gps']; ?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</body>
</html>
This is the output result
|CLIENT|STATUS|GPS|
|---|---|---|
| [email protected]| active| -00.269704939193858,00.085300236009065|
| [email protected]| active| -00.29697452399767,00.120804981797505|
But now i need this to generate the google maps markers on the map and this is my map below
var handleGoogleMapSetting = function() {
"use strict";
var mapDefault;
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-00.297106, 00.119429),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
mapDefault = new google.maps.Map(document.getElementById('google-map-default'), mapOptions);
$(window).resize(function() {
google.maps.event.trigger(mapDefault, "resize");
});
var defaultMapStyles = [];
var flatMapStyles = [{"stylers":[{"visibility":"off"}]},{"featureType":"road","stylers":[{"visibility":"on"},{"color":"#ffffff"}]},{"featureType":"road.arterial","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"road.highway","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"landscape","stylers":[{"visibility":"on"},{"color":"#f3f4f4"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#7fc8ed"}]},{},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#83cead"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"weight":0.9},{"visibility":"off"}]}];
var turquoiseWaterStyles = [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill"},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#7dcdcd"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]}];
var icyBlueStyles = [{"stylers":[{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}];
var oldDryMudStyles = [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}];
var cobaltStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#293036"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}];
var darkRedStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#000000"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}];
$('[data-map-theme]').click(function() {
var targetTheme = $(this).attr('data-map-theme');
var targetLi = $(this).closest('li');
var targetText = $(this).text();
var inverseContentMode = false;
$('#map-theme-selection li').not(targetLi).removeClass('active');
$('#map-theme-text').text(targetText);
$(targetLi).addClass('active');
switch(targetTheme) {
case 'flat':
mapDefault.setOptions({styles: flatMapStyles});
break;
case 'turquoise-water':
mapDefault.setOptions({styles: turquoiseWaterStyles});
break;
case 'icy-COLOR_BLUE':
mapDefault.setOptions({styles: icyBlueStyles});
break;
case 'cobalt':
mapDefault.setOptions({styles: cobaltStyles});
inverseContentMode = true;
break;
case 'old-dry-mud':
mapDefault.setOptions({styles: oldDryMudStyles});
break;
case 'dark-red':
mapDefault.setOptions({styles: darkRedStyles});
inverseContentMode = true;
break;
default:
mapDefault.setOptions({styles: defaultMapStyles});
break;
}
if (inverseContentMode === true) {
$('#content').addClass('content-inverse-mode');
} else {
$('#content').removeClass('content-inverse-mode');
}
});
};
var MapGoogle = function () {
"use strict";
return {
//main function
init: function () {
handleGoogleMapSetting();
}
};
}();
$(document).ready(function() {
MapGoogle.init();
});