google map api แสดงข้อมูลจาก db บนmarker แบบ auto

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา google map api แสดงข้อมูลจาก db บนmarker แบบ auto

google map api แสดงข้อมูลจาก db บนmarker แบบ auto
ผมต้องการดึงข้อมูลจาก database(name)มาแสดงในรูปแบบของtextbox บน mareker แบบ autoโดยที่ไม่ต้องคลิ้ก marker รบกวนผู้รู้บอกวิธีด้วยครับ
jasondata.php

<?php
header('Content-Type: application/json');
$objConnect = mysql_connect("localhost","root","");
$objDB = mysql_select_db("map_api");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM lat_long  ";
$objQuery = mysql_query($strSQL);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
array_push($resultArray,$obResult);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>

lat_long.php
<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapOptions = {
          center: {lat: 13.847860, lng: 100.604274},
          zoom: 10,
        }
        var maps = new google.maps.Map(document.getElementById("map"),mapOptions);
        var marker, info; 
        $.getJSON("jsondata.php",function(jsonObj) {
          $.each(jsonObj, function(i, item){
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.lat,item.lng),
            map : maps,//แสดงใน maps
          });
          info = new google.maps.InfoWindow();
          google.maps.event.addListener(marker,'click', (function(marker, i){
            return function() {
              info.setContent(item.name);
              info.open(maps, marker);
            }
          })(marker, i));
        });
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3I4EnpJKFV_LHMXwiRoCMIUWGiDAaxR4&callback=initMap"async defer></script>
  </body>
</html>
 


สรรชัย แสนขุรัง 31-08-2018 11:41:02

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ดูเนื้อหาการดึงข้อมูลจากฐานข้อมูลต่อไปนี้เป็นแนวทาง
 
กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map http://niik.in/338 
 
หรือจาก
 
แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5 http://niik.in/483 
 
แล้วแก้ไขส่วนของการแสดง infowindow โดยเพิ่ม trigger ให้ ตัว markder ทำการคลิกเองอัตโนมัติ
ตามตัวอย่างโค้ดบางส่วนด้านล่างนี้

GGM.event.addListener(my_Marker[k], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว			
    infowindow[k].open(map, my_Marker[k]); //  แสดง info window
});   			

// ให้ marker แต่ละตัว กดเปิด infowindow อัตโนมัติ
GGM.event.trigger(my_Marker[k], 'click');
 
ผลลัพธ์ที่ได้จะเป็นตามรูปด้านล่าง



ninenik 31-08-2018
 ความคิดเห็นที่ 2
 ขอบคณมากครับพี่ Ninenik  จะลองทำตอนนี้เลยครับ


สรรชัย แสนขุรัง 31-08-2018 14:35
 ความคิดเห็นที่ 3
  ทำได้เเล้วน่ะครับพี่ ขอบคุณมากครับ Ninenik  


สรรชัย แสนขุรัง 01-09-2018 11:25
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ