[css]
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
#infoWindow {
width:400px;
height:300px;
}
.onglet
{
display:inline-block;
margin-right:3px;
padding:3px;
cursor:pointer;
}
.onglets{
border-bottom: 3px solid #cad200;
}
.onglet_0
{
background:#ffffff;
border-bottom: 0px solid black;
padding: 7px;
font-size: 18px;
border-top-left-radius: 10px;
font-family: bebas neue;
font-weight: 400;
border-top-right-radius: 10px;
letter-spacing: 3px;
padding-bottom: 8px;
}
.onglet_1
{
background:#cad200;
border-bottom: 0px solid black;
padding: 7px;
font-size: 21px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-family: bebas neue;
letter-spacing: 3px;
font-weight: bold;
}
.contenu_onglet
{
background-color:#f6f6f7;
margin-top:-1px;
padding:5px;
display: none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
[/css]
[code]
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
function add() {
var i = document.getElementById( 'contenu_onglet_que' );
var j=document.getElementById('contenu_onglet_quand')
i.innerHTML=j.innerHTML ;
}
function add_map() {
var i = document.getElementById( 'contenu_onglet_que' );
var j=document.getElementById('contenu_onglet_map')
i.innerHTML=j.innerHTML ;
}
[/code]
[code]
<div class="contenu_onglet" id="contenu_onglet_que">
<div class="col-md-12 distr col-sm-12 col-xs-12">
<h1>Merci d'entrer les informations de votre capteur Hidnseek</h1>
<!--texte qui nous demande d'entrer les informations-->
<form action="" method="post">
<div class="col-md-12">
<br>
<br>
<div class=" col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pseudo">ID Hidnseek :</label> <!-- On va faire un premier champs pour l'id Hidnseek-->
<div class="col-md-5">
<input class="form-control form-prod" name="id_hidnseek" placeholder="ID Hidnseek" type="text">
</div>
</div>
<div class="col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pass">Clé Hidnseek :</label> <!-- On va faire un deuxième champs pour la clé Hidnseek-->
<div class="col-md-5">
<input class="form-control form-prod" name="cle_hidnseek" placeholder="Clé Hidnseek" type="text">
</div>
</div>
<div class=" col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pseudo">Nombre de points de géolocalisations:</label> <!-- On va faire un premier champs pour l'id Hidnseek-->
<div class="col-md-5">
<input class="form-control form-prod" name="nombre_point_geo" placeholder="Points Géolocalisations" type="text">
</div>
</div>
<div class=" col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pseudo">Type de zone:</label> <!-- On va faire un premier champs pour l'id Hidnseek-->
<div class="col-md-5">
<select class="form-control form-prod" name="choix">
<option value="1">
RECTANGLE
</option>
<option value="2">
CERCLE
</option>
<option value="3">
POLYGONE
</option>
</select>
</div>
</div>
<div class="form-group" style="text-align: center;">
<label class="col-md-12 control-label"><button onclick="add_map()"><label class="col-md-12 control-label"><label class="col-md-12 control-label">OK</label></label></button></label>
</div>
<!-- Bouton qui permet de valider le formulaire-->
</div>
<div class="form-group" style="text-align: center;">
<label class="col-md-12 control-label"><button onclick="add()"><label class="col-md-12 control-label"><label class="col-md-12 control-label">Ajouter un capteur.</label></label></button></label>
</div>
</form>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_quand">
<div class="col-md-12 distr col-sm-12 col-xs-12">
<form action="" method="post">
<div id="text_info">
<p>En cliquant sur OK et si vos paramètres sont disponible, vous serez redirigé directement sur la phase de validation d'enregistrement automatique.</p>
</div>
<div class="col-md-12">
<br>
<br>
<div class=" col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pseudo">ID Hidnseek :</label> <!-- On va faire un premier champs pour l'id Hidnseek-->
<div class="col-md-5">
<input class="form-control form-prod" name="id_hidnseek" placeholder="ID Hidnseek" type="text">
</div>
</div>
<div class="col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-3 control-label" for="pass">Clé Hidnseek :</label> <!-- On va faire un deuxième champs pour la clé Hidnseek-->
<div class="col-md-5">
<input class="form-control form-prod" name="cle_hidnseek" placeholder="Clé Hidnseek" type="text">
</div>
</div>
<div class=" col-md-offset-3 col-md-8 form-group" style="text-align: center;">
<label class="col-md-12 control-label"><input class="btn btn-success" type="submit" value="OK"></label>
</div>
<!-- Bouton qui permet de valider le formulaire-->
</div>
</form>
</div>
</div>
<?php
if ($new_capt_cle !='' && $new_capt_id!='') {
?>
<script>
/*var element=document.getElementById("boutton_ajout");
while (element.firstChild){
element.removeChild(element.firstChild);
}*/
document.getElementById('contenu_onglet_que').innerHTML = '';
var h1 = document.createElement('h1');
h1.innerHTML = "<button onclick=\"bonjour()\"> VALIDER <\/button>";
document.getElementById('contenu_onglet_que').appendChild(h1);
var new_capt_id= <?php echo $new_capt_id ?>;
var new_capt_cle= <?php echo $new_capt_cle ?>;
var envoi=document.createElement('envoi');
envoi.innerHTML='<span id=\"new_capt_id\" style=\"visibility:hidden;\">' + new_capt_id +'<\/span>'+'<span id=\"new_capt_cle\" style=\"visibility:hidden;\">' + new_capt_cle + '<\/span>';
document.getElementById('boutton_ajout').appendChild(envoi);
</script> <?php
}
?> <?php
if ($id_hidnseek !='' && $cle_hidnseek!='') {
if($id_hidnseek_cap_db==$id_hidnseek && $cle_hidnseek_cap_db==$cle_hidnseek){
if(!empty($nb_pt_geo)&&(is_numeric($nb_pt_geo))){
$donnees_zone_capteur=zone_change($id_hidnseek,$zone);
$coordonnee=get_value_in_dbb($nb_pt_geo,$id_hidnseek);
$coordonnee_rectangle=get_value_for_save_rectangle($id_hidnseek);
$coordonnee_cercle=get_value_for_save_cercle($id_hidnseek);
$coordonnee_polygone=get_value_for_save_polygone($id_hidnseek);
?>
<div class="contenu_onglet" id="contenu_onglet_map">
<div class="col-md-12 distr col-sm-12 col-xs-12">
<div id="bouton">
</div>
<form>
<input class="controls" id="pac-input" placeholder="Entrer votre recherche" type="text">
</form>
<div id="map" style="width: 850px; height: 550px; visibility:visible"></div>
</div>
<script>
var rectangle; // on définit différente variable
var map;
var infoWindow;
var infoWindowx;
var rayon_cercle;
var circle;
var latitude_centre;
var longitude_centre;
var id_cap;
var contentString;
var centre;
var marqueur;
</script>
<div align="left">
<p>Position actuelle: <img alt="Marqueur vert" height="35" src="../img/mmap.png" width="25"> Position précédente: <img alt="Marqueur rouge" height="35" src="../img/mmapr.png" width="25"></p>
</div>
<script>
//codage de la map
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8GEtdljGgrf37hyD0aQGuNCt1Uzdd7Ng&libraries=places&callback=initAutocomplete&signed_in=true">
</script>
</div>
</div>
[/code]
La suite normalement est tout ce qui est codage en javascript pour la carte mais bon cela fonctionne donc pas nécessaire de le mettre est c'est assez long
