Jump to content

Google Maps with multiple markers from array

Penwell

By Penwell
in PHP Coding Help

 Share

Recommended Posts

Penwell Newbie

Penwell

Posted
Posted

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|
|---|---|---|
| user1@example.com| active| -00.269704939193858,00.085300236009065|
| user2@example.com| 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();
});

 

Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

Making a simple Marker is pretty simple. Check out the documentation and get just one marker on the map. It doesn't need to be real data. You can even hardcode the location. Get the basic marker there, then perhaps also work with the settings to customize it to look the way you want.

Then add the popup tooltip functionality to it. Again, hardcode the information. Work with it, customize it, etc.

Separate from that is getting the GPS data onto the page in a useful way. Do you have the map set up on the page yet? Where you want, how you want it? I don't see it in that index.php page...

Link to comment
Share on other sites
Penwell Newbie

Penwell

Posted
  • Author
Posted
3 hours ago, requinix said:

Making a simple Marker is pretty simple. Check out the documentation and get just one marker on the map. It doesn't need to be real data. You can even hardcode the location. Get the basic marker there, then perhaps also work with the settings to customize it to look the way you want.

Then add the popup tooltip functionality to it. Again, hardcode the information. Work with it, customize it, etc.

Separate from that is getting the GPS data onto the page in a useful way. Do you have the map set up on the page yet? Where you want, how you want it? I don't see it in that index.php page...

Yes i already have my map setup the way i want it to be displayed  

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();
});

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.