GoogleマップのApiマーカーをクリックした後のプルダウンの値を変更します。

皆さんは素晴らしい一日を過ごしたいと思っています。私は質問があります。会社の所在地のリストを含むドロップダウンメニューがあり、私はフォームを持っています。以下は私のGoogleマップapiの作業です。以前受信したjsonのデータをすべて私のapiから取得します。現在、マップマーカーをクリックするとドロップダウンリストの値が変更されます。フォームの例を紹介します。GoogleマップのApiマーカーをクリックした後のプルダウンの値を変更します。

そしてここでのコードで、ほとんどそこイムしかし、私はそれが仕事を得るいけない...今私はそれが値が正しいかどうかを確認するためのマーカーをクリックしたときに警告を行うことが、とき私はそれをクリックしてドロップダウンメニューが空になる。事前に

<?php 
//Habilitar las sesiones 
$codigoError =""; 
session_start(); 

//Validar si existen las sesiones 
if(!isset($_SESSION['vsJsonAgencias'])) 
{ 
    header("location:../index.php"); 
} 

//if(!empty($_SESSION['codigoError'])){ 
$codigoError = $_SESSION['codigoError']; 
//} 
?> 
<!DOCTYPE html> 
<html lang="en"> 

    <head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="description" content=""> 
    <meta name="author" content="SGLabz"> 

    <title>CitasWeb</title> 

    <!-- Bootstrap core CSS --> 
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="../css/portfolio-item.css" rel="stylesheet"> 
    <link rel="stylesheet" href="../css/form-basic.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> 
    <script src="../js/form.js"></script> 
    <link href="../css/pikaday.css" rel="stylesheet"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- date new--> 
<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    </head> 

    <body > 

    <!-- Navigation --> 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> 
     <div class="container"> 
     <a class="navbar-brand" href="#"><?php echo '<img alt="LOGO" height="40" width="40" src="http://'.$_SESSION['vsApache'].'/citasweb/icon.png"" >';?>CitasWeb</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     </div> 
    </nav> 

    <!-- Page Content --> 
    <div class="container"> 


     <!-- Portfolio Item Row --> 
     <form class="form-basic" id="form-basic" <?php echo 'action="http://'.$_SESSION['vsApache'].'/citasweb/gestAgenciafunc.php"';?> method="post"> 

      <div class="form-title-row"> 
       <h1>Seleccionar</h1> 
      </div> 

      <div class="form-row"> 
       <label> 
        <span>Gestión</span> 
        <?php 

        echo '<select name="codgestion">'; 
        $jsonData =$_SESSION['vsJsonAgencias']; 
        $jsonDataObject = json_decode($jsonData); 

        foreach($jsonDataObject->TipoGestion as $option){ 
         echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>'; 

        } 

        echo '</select>'; 
        ?> 
       </label> 
      </div> 
      <div class="form-row"> 
       <label> 
        <span>Fecha</span> 
        <input input type="text" id="datepicker" name="fecha" required/> 
       </label> 
      </div> 
      <div class="form-row"> 
       <label> 
        <span>Agencia</span> 
        <?php 

        echo '<select id="agencia" name="agencia">'; 
        //$jsonData = $_SESSION['vsJsonAgencias']; 
        $jsonData = file_get_contents('https://api.myjson.com/bins/t222l'); 
        $jsonDataObject = json_decode($jsonData); 

        foreach($jsonDataObject->Agencias as $option){ 
         echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>'; 
         //CAPTURAR NOMBRE DE LA AGENCIA 
         $_SESSION['vsNomagencia'] = $option->Nombre; 
        } 

        echo '</select>'; 
        ?> 
       </label> 
      </div> 

    <body onload = "loadMap()"> 
    <h2>Agencias</h2> 
    <?php 
        //$jsonData = file_get_contents('https://api.myjson.com/bins/t222l'); 
        $jsonDataObject = json_decode($jsonData); 
     ?> 
     <center> 
    <div id = "map" style = "width:480px; height:480px;"></div> 
     <script> 
     // fake JSON call 
     function getJSONMarkers() { 
      var markers = <?php echo $jsonData ?>; 
      return markers; 
     } 

     function loadMap() { 
      // Initialize Google Maps 
      const mapOptions = { 
      center:new google.maps.LatLng(13.706360,-89.212204), 
      zoom: 10 
      } 
      infoWindow = new google.maps.InfoWindow; 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 

      infoWindow.setPosition(pos); 
      infoWindow.setContent('Usted esta aquí.'); 
      infoWindow.open(map); 
      map.setCenter(pos); 
      }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 

      const map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      // Load JSON Data 
      const data = getJSONMarkers(); 

      // Initialize Google Markers 
      for(agencia of data.Agencias) { 
       let marker = new google.maps.Marker({ 
       id: agencia.ID, 
       map: map, 
       position: new google.maps.LatLng(agencia.Latitud, agencia.Longitud), 
       content: agencia.Nombre, 

       }) 

marker.info = new google.maps.InfoWindow({ 
    content: agencia.Nombre 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    marker.info.open(map, marker); 
    marker = this; 
    alert('ID is :'+ this.id); 
    $(document).ready(function(){ 
    $("#agencia").val(this.id); 
}); 
}); 
      } 
     } 
     </script> 
     <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD-h6xw5-2X2DdSmL93dQmrR7p63Q_uv5w"></script> 
    </body></center> 


      <div class="form-row"> 
       <button type="submit" >Consultar Horarios</button> 

      </div> 
      <center> 
      <?php 
       //print_r($_SESSION['codigoError']); 
       print_r($codigoError); 
      ?> 
      <br> 
      </center><br/> 
      <?php echo '<a href="http://'.$_SESSION['vsApache'].'/citasweb/php/menu.php"><img alt="SALIR" height="42" src="http://'.$_SESSION['vsApache'].'/citasweb/php/regresar.png"" width="142"></a>';?> 
     </form> 

     </div> 
     <!-- /.row --> 



    </div> 
    <!-- /.container --> 

    <!-- Footer --> 
    <footer class="py-5 bg-dark"> 
     <div class="container"> 
      <?php echo '<center><img alt="SALIR" height="50" width="170" src="http://'.$_SESSION['vsApache'].'/citasweb/conticsa.png"" ></center><br/>';?> 
     <p class="m-0 text-center text-white">Copyright &copy; Citas Web 2017</p> 

     </div> 
     <!-- /.container --> 
    </footer> 

    <!-- Bootstrap core JavaScript --> 
    <script src="vendor/jquery/jquery.min.js"></script> 
    <script src="vendor/popper/popper.min.js"></script> 
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script> 
    <script src="../js/pikaday.js"></script> 
    <script src="../js/moment.js"></script> 
<script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    $.datepicker.regional['es'] = { 
    closeText: "Cerrar", 
    prevText: "&#x3C;Ant", 
    nextText: "Sig&#x3E;", 
    currentText: "Hoy", 
    monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio", 
    "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ], 
    monthNamesShort: [ "ene","feb","mar","abr","may","jun", 
    "jul","ago","sep","oct","nov","dic" ], 
    dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ], 
    dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ], 
    dayNamesMin: [ "D","L","M","M","J","V","S" ], 
    weekHeader: "Sm", 
    dateFormat: "dd/mm/yy", 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: false, 
    yearSuffix: "" }; 
$.datepicker.setDefaults($.datepicker.regional['es']); 
    }); 
    </script> 


    </body> 
</html>

おかげ..

出典

2017-10-04 E. Galdamez

あなたは、サンプルのJSONデータを提供してもらえますか？ – rafon

私はweb api myjsonのjsonを使って投稿を編集しようとしています –

このリンクのjson apiで作業する必要があります> https://api.myjson.com/bins/t222l –

$（文書）に問題の.ready - これは必須ではありません。

google.maps.event.addListener(marker, 'click', function() { 
     marker.info.open(map, marker); 
     marker = this; 
     alert('ID is :'+ this.id); 
     //----$(document).ready(function(){ 
     $("#agencia").val(this.id); 
     //----}); 
    });

出典

2017-10-04 16:33:17 dev8080

これを受け入れられた答えとしてマークしました。貴重な時間をいただきありがとうございます。私は素晴らしい仕事をしてくれたjsと仕事を始めました。 –

GoogleマップのApiマーカーをクリックした後のプルダウンの値を変更します。

答えて

関連する問題