<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style_map.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  </head>
  <body>
    <div id="map-canvas"/>
    <?php
    include('../connexion.php');
	//include('g-map.php');
	?>
    <script>
	// *
	// * Add multiple markers
	// * 2013 - en.marnoto.com
	// *
	
	// necessary variables
	var map;
	var infoWindow;
	
	// markersData variable stores the information necessary to each marker
	var markersData = [
		<?php
		$i=0;
		$sql='SELECT COUNT(*) FROM entreprise, commune WHERE entreprise.id_commune=commune.id_commune';
		$req=$bdd->query($sql);
		$point = $req->fetch();
		$nbr=$point[0];
		$sql='SELECT * FROM entreprise, commune WHERE entreprise.id_commune=commune.id_commune';
		$req=$bdd->query($sql);
		while ($point = $req->fetch())
		{
			$i++;
			?>
			{
			  lat: <?php echo $point['latitude_entreprise'] ?>,
			  lng: <?php echo $point['longitude_entreprise'] ?>,
			  name: "<?php echo $point['lib_entreprise'] ?>",
			  address1:"<?php echo $point['lib_commune'] ?>",
			  address2: "<?php echo $point['adresse_entreprise'] ?>",
			  postalCode: "<?php echo $point['tel_entreprise'] ?>"
			},
			<?php
		}
		?>
		
		<?php
		$i=0;
		$sql='SELECT COUNT(*) FROM adresse, entreprise, commune WHERE entreprise.id_entreprise=adresse.id_entreprise AND commune.id_commune=adresse.id_commune';
		$req=$bdd->query($sql);
		$point = $req->fetch();
		$nbr=$point[0];
		$sql='SELECT * FROM adresse, entreprise, commune WHERE entreprise.id_entreprise=adresse.id_entreprise AND commune.id_commune=adresse.id_commune';
		$req=$bdd->query($sql);
		while ($point = $req->fetch())
		{
			$i++;
			?>
			{
			  lat: <?php echo $point['latitude_adresse'] ?>,
			  lng: <?php echo $point['longitude_adresse'] ?>,
			  name: "<?php echo $point['lib_entreprise'] ?>, <?php echo $point['lib_adresse'] ?>",
			  address1:"<?php echo $point['lib_commune'] ?>",
			  address2: "<?php echo $point['adresse_adresse'] ?>",
			  postalCode: "<?php echo $point['tel_adresse'] ?>"
			}<?php if($nbr>$i)echo ',
			';
		}
		?>
	];
	function initialize() {
	   var mapOptions = {
		  center: new google.maps.LatLng(5.3489656,-4.2600283),
		  zoom: 1,
		  mapTypeId: 'roadmap',
	   };
	
	   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	   // a new Info Window is created
	   infoWindow = new google.maps.InfoWindow();
	
	   // Event that closes the Info Window with a click on the map
	   google.maps.event.addListener(map, 'click', function() {
		  infoWindow.close();
	   });
	
	   // Finally displayMarkers() function is called to begin the markers creation
	   displayMarkers();
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	
	
	// This function will iterate over markersData array
	// creating markers with createMarker function
	function displayMarkers(){
	
	   // this variable sets the map bounds according to markers position
	   var bounds = new google.maps.LatLngBounds();
	   
	   // for loop traverses markersData array calling createMarker function for each marker 
	   for (var i = 0; i < markersData.length; i++){
	
		  var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
		  var name = markersData[i].name;
		  var address1 = markersData[i].address1;
		  var address2 = markersData[i].address2;
		  var postalCode = markersData[i].postalCode;
	
		  createMarker(latlng, name, address1, address2, postalCode);
	
		  // marker position is added to bounds variable
		  bounds.extend(latlng);  
	   }
	
	   // Finally the bounds variable is used to set the map bounds
	   // with fitBounds() function
	   map.fitBounds(bounds);
	}
	
	// This function creates each marker and it sets their Info Window content
	function createMarker(latlng, name, address1, address2, postalCode){
	   var marker = new google.maps.Marker({
		  map: map,
		  position: latlng,
		  title: name
	   });
	
	   // This event expects a click on a marker
	   // When this event is fired the Info Window content is created
	   // and the Info Window is opened.
	   google.maps.event.addListener(marker, 'click', function() {
		  
		  // Creating the content to be inserted in the infowindow
		  var iwContent = '<div id="iw_container">' +
				'<div class="iw_title">' + name + '</div>' +
			 '<div class="iw_content">' + address1 + '<br />' +
			 address2 + '<br />' +
			 postalCode + '</div></div>';
		  
		  // including content to the Info Window.
		  infoWindow.setContent(iwContent);
	
		  // opening the Info Window in the current map and at the current marker location.
		  infoWindow.open(map, marker);
	   });
	}
	</script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmrnUEq6Wpxikna4f-WZz7f7UYM3aYhdM&signed_in=true&callback=initMap">
    </script>
    
  </body>
</html>