Google Maps with multiple markers

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();
});
Sponsor our Newsletter | Privacy Policy | Terms of Service