Googleマップのマーカーをhtmlボタンで貼り付けます

-1

（私は自分のことを学んでいますが、私のコードは面倒です、inb4はごめんなさい）私はいくつかのデータとボタンを備えたテーブルを持っています。ボタンをクリックすると、その場所の地図にマーカーが表示されます（SQLは問題ありません）必要な情報をお尋ねください！事前Googleマップのマーカーをhtmlボタンで貼り付けます

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
</head> 
<body> 

    <!-- google maps api --> 

    <div id="map" style="width:600px;height:500px"></div> 
      <script> 
     function myMap() { 
      var santiago = new google.maps.LatLng(-33.4545832, -70.6541925); 
      var mapCanvas = document.getElementById("map"); 
      var mapOptions = {center: santiago, zoom: 11}; 
      var map = new google.maps.Map(mapCanvas, mapOptions); 
      function addmarker(lat, lon) { 
       var location = new google.maps.LatLng(lat, lon); 
       var marker = new google.maps.Marker({ 
        position: location, 
        map: map 
       }); 
      } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=myMap"> 
    </script> 
    <div id="tabla"> 
     <table Style="width:35%"> 
      <thead> 
       <tr> 
        <th>Tiempo prom</th> 
        <th>Origen</th> 
        <th>Señal Or</th> 
        <th>Destino</th> 
        <th>Mapa</th> 
       </tr> 
      </thead> 
      <tbody> 
       <?php 
       include "conexion.php"; 
       include "func.php"; 
       $sql = "SELECT avg(call_setup_time) as promllamada, CELL_ID_1, CELL_ID_2, avg(SENAL_1) as promsenal, LATITUD_1 as lat, LONGITUD_1 as lon from call_setup where SENAL_1<=-80 GROUP BY CELL_ID_1 ORDER BY promllamada desc limit 20"; 
       $resultado = $conn->query($sql); 
       while ($row = $resultado->fetch_assoc()) { 
        ?> 
        <tr> 
         <td><?php echo $row['promllamada'] ?></td> 
         <td><?php echo $row['CELL_ID_1'] ?></td> 
         <td><?php echo $row['promsenal'] ?></td> 
         <td><?php echo $row['CELL_ID_2'] ?></td> 
         <td><button type="button" id="agregar" onclick="addmarker(<?php echo $row['lat'] . ", " . $row['lon']; ?>)">Ver en mapa</button></td> 
         <?php 
        } 
        ?> 
      </tbody> 
     </table> 
     <!-- datos --> 
    </div> 
    <div id="datos"></div> 
</body>

出典

2017-04-26 Santiago Center

でのおかげで、これはあなたが探しているものですか？

ボタンagregarによって呼び出されたaddmarker関数は、myMap関数内にありました。私はそれらを分けた。

map初期化とマーカー「セッター」を簡略化して、newオブジェクトをプロパティに直接割り当てました。

フィドル：

https://jsfiddle.net/cbao9wLg/62/

$('#button').click(function() { 
 
    addmarker('-22.3157017', '-49.0660877', 'Infowindow test'); 
 
}); 
 
$('#button2').click(function() { 
 
    addmarker('-23.5936152', '-46.5856465', 'Infowindow test2'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button" style="width:80px;height:30px;cursor:pointer;"> 
 
    Click 
 
</button> 
 
<button id="button2" style="width:80px;height:30px;cursor:pointer;"> 
 
    Click2 
 
</button> 
 
<div id="map" style="width:555px;height:500px"></div> 
 
<script> 
 
    function myMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: new google.maps.LatLng(-33.4545832, -70.6541925), 
 
     zoom: 11 
 
    }); 
 
    } 
 

 
    function addmarker(lat, lon, info) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(lat, lon), 
 
     info: new google.maps.InfoWindow({ 
 
     content: info 
 
     }), 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     marker.info.open(map, marker); 
 
    }); 
 

 
    map.panTo(marker.getPosition()); 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=myMap"></script>

出典

2017-04-26 19:55:06 doutriforce

はい、それは私が探していたものでした！ありがとうございました:) もう1つ、毎回地図を再読み込みできませんか？（あなたが質問を理解することを願って） –

よろしくお願いします。「リロードなし」とはどういう意味ですか？ – doutriforce

私はテーブルのすべての行に1つのボタンがあります。ボタンをクリックするたびに、新しいセンターに地図が再ロードされます。地図がこの「点滅」しないようにしますか？ –

Googleマップのマーカーをhtmlボタンで貼り付けます

答えて

関連する問題