Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,998

HOME > PHP > PHP Forum > ขอสอบถามเกี่ยวกับการค้นหาสถานที่บน Google map API หน่อยครับ



 

ขอสอบถามเกี่ยวกับการค้นหาสถานที่บน Google map API หน่อยครับ

 



Topic : 132927



โพสกระทู้ ( 22 )
บทความ ( 0 )



สถานะออฟไลน์




ผมขอสอบถามหน่อยครับ พอดีผมกำลังศึกษาเกี่ยวกับ Google map APi อยู่ คือผมจะทำการ Select เลือกจังหวัด แล้วให้มันแสดงหมุดสถานที่ร้านอาหารในฐานข้อมูลของผม อย่างถ้าผมเลือกจังหวัดนครสวรรค์ ซึ่งผมได้ทำการบันทึกชื่อร้านอาหาร เก็บ lat lng และรหัสร้านอาหารไว้แล้วประมาณ 10 ร้านในจังหวัดนครสวรรค์ โดยพ่วงกับ id ของจังหวัด ผมอยากให้มันแสดงหมุดร้านอาหารออกมา 10 หมุด ตามที่ผม Select เลือกจังหวัด มันพอจะมีวิธีการทำบ้างไหมอ่าครับ หรือแนะนำแหล่งศึกษาข้อมูลที่จะทำระบบให้มันออกมาประมาณนี้ก็ได้นะครับ

รูปตัวอย่างประกอบครับ
searchgooglemap

ช่วยผมทีนะครับ *_*



Tag : PHP, HTML5, Ajax, jQuery, JAVA







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-01-16 11:27:42 By : tomsmile05 View : 174 Reply : 4
 

 

No. 1



โพสกระทู้ ( 219 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ลองดูในกระทู้นี้ดูก่อนครับ https://www.thaicreate.com/community/googlemap-v3-from-mysql.html จากนั้นก็ลองส่งเงื่อนไข where เข้าไปดู (ถ้าหากขึ้น marker icon ดับเบ็ลก็ลองหากวิธีเคลียร์ก่อน add marker ใหม่ครับ) แต่ก็ยังไม่เคยทำเหมือนกัน






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-16 23:16:18 By : ccjpn
 


 

No. 2



โพสกระทู้ ( 5,123 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ตอนนี้เขียนไว้แบบใหนบ้างแล้วครับ แล้วติดปัญหาตรงใหนบ้าง

อยากให้ช่วยต้องระบุปัญหาครับ ไม่ใช่เอา UI คนอื่นที่แคปมาเป็นปัญหาของตัวเอง

ยินดีช่วยเหลือครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-17 09:44:15 By : deawx
 

 

No. 3



โพสกระทู้ ( 22 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับพี่ deawx และคุณ James_037 ตอนนี้ผมทำถึงในส่วนของเลือกจังหวัดแล้วให้แสดงหมุดขึ้นมาแล้วครับ

ตามภาพประกอบนี้ครับ

googlemapFAQ

### แต่ปัญหาของผมตอนนี้คือ ###

1. บนแผนที่มันไม่โฟกัสไปที่กลุ่มหมุดที่เลือกจากจังหวัดครับ มันดันมาโฟกัสที่ กทม.

googlemapFAQ2

ตามภาพนี้ครับหลังจากค้นหา แต่หมุดขึ้นมาปกติครับ

2. คลิกที่หมุดแล้วมันไม่ซูมและไม่มีกล่องข้อความรายละเอียดข้อมูลขึ้นมาแสดงครับ

code ที่ผมใช้นะครับ

ส่วนของหน้า index.php

Code (PHP)
<!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 http-equiv="x-ua-compatible" content="ie=edge">
    <title>ทดสอบ GoogleMapApi</title>
    <!-- Font Awesome -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style-font.css" rel="stylesheet">
	<link href="css/texthover-effect.css" rel="stylesheet">
	<link href="css/herder-ssl.css" rel="stylesheet">
	<style>
		  /* Always set the map height explicitly to define the size of the div
		   * element that contains the map. */
		  #map {
			height: 90%;
		  }
		  /* Optional: Makes the sample page fill the window. */
		  html, body {
			height: 90%;
			margin: 0;
			padding: 0;
		  }
		  .anyClass {
			  height:300px;
			  overflow-y: scroll;
		  }
	</style>	
<!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script src="jquery-latest.js"></script>
</head>
<?php 
	include ('config/mysql_connection_class.php');
	include ('config/connect.php');
?>
<body>

		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<img src="img/tab-head3.png" class="d-none d-lg-block mx-auto img-fluid">
					<img src="img/we-branchlocations.png" class="d-lg-none mx-auto d-block img-fluid">
				</div>
			</div>
		</div>
		<div class="container-fluid" style="background-color:#EBF2FF;">
		
		<form class="form-horizontal" name="f" method="get" action="branchlocations2.php">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 mb-2 mt-3">
						<span class="SukhumvitSet" style="font-size: 20px; font-weight: bold; color:dodgerblue;">
						 กรุณาเลือกจังหวัด :
						</span>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4 mb-4">
						<select class="form-control" id="PROVINCE_CODE" name="PROVINCE_CODE" style="border-color:deepskyblue;" onChange="pulldata($('#PROVINCE_CODE').val());">
							<option value="0">จังหวัด</option>
							<?php
								$mysqlProvince = new MySQL_Connection("$host", "$user", "$pw", "$dbname");
								$mysqlProvince->charset = 'utf8';
								$sqlProvince = "SELECT * FROM tbdata_province WHERE tbdata_province.PROVINCE_CODE='46' or 
								tbdata_province.PROVINCE_CODE='62' or 
								tbdata_province.PROVINCE_CODE='40' or 
								tbdata_province.PROVINCE_CODE='18' or 
								tbdata_province.PROVINCE_CODE='36' or 
								tbdata_province.PROVINCE_CODE='57' or 
								tbdata_province.PROVINCE_CODE='50' or 
								tbdata_province.PROVINCE_CODE='63' or 
								tbdata_province.PROVINCE_CODE='60' or 
								tbdata_province.PROVINCE_CODE='55' or 
								tbdata_province.PROVINCE_CODE='56' or 
								tbdata_province.PROVINCE_CODE='66' or 
								tbdata_province.PROVINCE_CODE='65' or 
								tbdata_province.PROVINCE_CODE='67' or				
								tbdata_province.PROVINCE_CODE='54' or
								tbdata_province.PROVINCE_CODE='44' or 
								tbdata_province.PROVINCE_CODE='16' or 
								tbdata_province.PROVINCE_CODE='52' or 
								tbdata_province.PROVINCE_CODE='51' or 
								tbdata_province.PROVINCE_CODE='42' or 
								tbdata_province.PROVINCE_CODE='47' or 
								tbdata_province.PROVINCE_CODE='17' or 
								tbdata_province.PROVINCE_CODE='64' or 
								tbdata_province.PROVINCE_CODE='72' or 
								tbdata_province.PROVINCE_CODE='39' or 
								tbdata_province.PROVINCE_CODE='15' or 
								tbdata_province.PROVINCE_CODE='41' or 
								tbdata_province.PROVINCE_CODE='53' or 
								tbdata_province.PROVINCE_CODE='61' 

								ORDER BY PROVINCE_NAME ASC";
								$mysqlProvince->query($sqlProvince);
								while($rsProvince = $mysqlProvince->fetch()){?>
									<option value="<?=$rsProvince['PROVINCE_CODE']?>"><?=$rsProvince['PROVINCE_NAME']?></option>
							<?php }
							$conn->close(); 
							?>
						</select>
					</div>
				</div>
				<div id="pulldata"></div>
			</div>
		</form>
		</div>
		<div id="map" style="width: 100%; height: 500px; overflow: hidden; position: relative;"> </div>
		
		<!-- Grid row -->
					
							
	<!--Main Layout -->
    <!--Footer-->
	     
	<!--/Footer-->
					
    <!-- APi Key --> 	
	<script>
      function pulldata(PROVINCE_CODE){  	
			$.ajax({url:"pulldata.php",
				async:false,
				cache:false,
				global:false,
				type:'POST',
				data:'PROVINCE_CODE='+PROVINCE_CODE,
				dataType:"html",
				success: function(result){
					$('#pulldata').html(result);	
				}
			});
	  }
		
		
      function initMap() {
	  
	  var mapOptions = {
			 center: {lat: 17.62635386361127, lng: 100.09231567382812},
			  zoom: 14,
			}
				
			var maps = new google.maps.Map(document.getElementById("map"),mapOptions);

			var marker, info;

			$.getJSON( "json.php", function( jsonObj ) {
					//*** loop
					$.each(jsonObj, function(i, item){
						marker = new google.maps.Marker({
						   position: new google.maps.LatLng(item.lat, item.lng),
						   map: maps,
						   title: item.branch_name
						});
						//alert(item.lat+"-"+item.lng)
					  info = new google.maps.InfoWindow({
						
						  //content: contentString,
						  maxWidth: 300
						});

					  google.maps.event.addListener(marker, 'click', (function(marker, i) {
					   var contentString =
							'<table><thead>'+
							'  <tr>'+
							'	<th colspan="2"><b>'+item.branch_name+'</b></th>'+
							'  </tr>'+
							'</thead>'+
							'<tbody>'+	    
							'  <tr>'+
							'    <td width="125" valign="top"><b>ที่อยู่:</b></td>'+
							'    <td>xxxx</td>'+
							 ' </tr>'+
							'  <tr>'+
							'    <td valign="top"><b>สถานที่ใกล้เคียง</b></td>'+
							'    <td>xxxx</td>'+
							'  </tr>'+
							 ' <tr>'+
							 '   <td><b>โทรศัพท์:</b></td>'+
							'    <td>xxxx</td>'+
							'  </tr>'+
							'</tbody>'+
						'</table>';
						
						
						return function() {
						   info.setContent(contentString);
						  info.open(maps, marker);
						}
					  })(marker, i));

					}); // loop

			 });

			
      }
	   $(document).ready(function () {
         $('#PROVINCE_CODE').change(function () {
				   //alert($('#PROVINCE_CODE').val());
				   if($('#PROVINCE_CODE').val()!="0" && $('#PROVINCE_CODE').val()!=""){
					  alert('เข้ามาส่วนนี้แล้ว');
					//   var array = $('#PROVINCE_CODE').val().split('|');
					//   //alert(array[0]);
					//   //alert(array[1]);
					//   if(array[0]!="" && array[1]!=""){
					  var mapOptions = {
			 center: {lat: 13.847860, lng: 100.604274},
			  zoom: 14,
			}
				
			var maps = new google.maps.Map(document.getElementById("map"),mapOptions);

			var marker, info;
			
						$.getJSON( "json.php?PROVINCE_CODE="+$('#PROVINCE_CODE').val(), function( jsonObj ) {
					//*** loop
							$.each(jsonObj, function(i, item){
								marker = new google.maps.Marker({
								   position: new google.maps.LatLng(item.lat, item.lng),
								   map: maps,
								   title: item.branch_name
								});
								//alert(item.branch_name)
								google.maps.event.addListener(marker, 'click', (function(marker, i) {
								   var contentString =
										'<table><thead>'+
										'  <tr>'+
										'	<th colspan="2"><b>'+item.branch_name+'</b></th>'+
										'  </tr>'+
										'</thead>'+
										'<tbody>'+	    
										'  <tr>'+
										'    <td width="125" valign="top"><b>ที่อยู่:</b></td>'+
										'    <td>xxxx</td>'+
										 ' </tr>'+
										'  <tr>'+
										'    <td valign="top"><b>สถานที่ใกล้เคียง</b></td>'+
										'    <td>xxxx</td>'+
										'  </tr>'+
										 ' <tr>'+
										 '   <td><b>โทรศัพท์:</b></td>'+
										'    <td>xxxx</td>'+
										'  </tr>'+
										'</tbody>'+
									'</table>';
									
									
									return function() {
									   info.setContent(contentString);
									  info.open(maps, marker);
									}
								  })(marker, i));
							 });
							 
						});
				   }else{
					alert("กรุณาเลือกจังหวัด!!");
					return false
				   }
				   
				   
			});

		});
	  
    </script>					
<script async defer src="https://maps.googleapis.com/maps/api/js?key=FORYOU=initMap"
  type="text/javascript"></script>

    
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>



ส่วนของ Ajax ดึงรายการข้อมูลมาแสดง

Code (PHP)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Record</title>
</head>

<body>
	<?php 
		$x = $_POST["PROVINCE_CODE"];
		
		include ('config/mysql_connection_class.php');
		include ('config/connect.php');
	
		$mysqlbranch = new MySQL_Connection("$host","$user","$pw","$dbname");
		$mysqlbranch->charset = 'utf8';
	
		$sqlbranch = "SELECT * FROM ssl_branch INNER JOIN tbdata_province ON tbdata_province.PROVINCE_CODE = ssl_branch.PROVINCE_CODE Where ssl_branch.branch_id > '000001' and ssl_branch.PROVINCE_CODE like '%$x%' ";
		$mysqlbranch->query($sqlbranch);
		$n =$mysqlbranch->numRows;
		$rsbranch = $mysqlbranch->fetch();
		if($n>'0'){		
	?>
	<div class="row">
		<div class="col-lg-6 mt-1">
			<span class="SukhumvitSet" style="font-size: 20px; font-weight: bold; color:dodgerblue;">
				ผลการค้นหา "จังหวัด<?php echo $rsbranch['PROVINCE_NAME'];?>" มีทั้งหมด <?php echo $n;?> สาขา
			</span>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 mt-2 mb-4">
			<div class="col-md-12 anyClass bg-white">
				<?php
					while($rsbranch = $mysqlbranch->fetch()){
				?>
				<div class="row mt-3 mb-3">
					<div class="col-md-2">
						<a href="#"><span class="SukhumvitSet" style="font-size:16px;font-weight: bold; color:dodgerblue;"><i class="fa fa-map-marker" aria-hidden="true"></i> สาขา<?php echo $rsbranch['branch_name'];?></span></a>
					</div>
					<div class="col-md-3">
						<span class="SukhumvitSet" style="font-size:16px;font-weight: bold;"><?php echo $rsbranch['branch_detail'];?></span>
					</div>
					<div class="col-md-4">
						<span class="SukhumvitSet" style="font-size:16px;font-weight: bold;"><?php echo $rsbranch['branch_address'];?> <?php $branch_street=$rsbranch['branch_street']; if($branch_street!='-'){?>ถนน<?php echo $rsbranch['branch_street']; }?> ต.<?php echo $rsbranch['DISTRICT_NAME'];?> อ.<?php echo $rsbranch['AMPHUR_NAME'];?> จ.<?php echo $rsbranch['PROVINCE_NAME'];?> <?php echo $rsbranch['zipcode'];?></span>
					</div>
					<div class="col-md-3">
						<span class="SukhumvitSet" style="font-size:16px;font-weight: bold;"><a href="<?php echo $rsbranch['branch_tel'];?>"><i class="fa fa-phone" aria-hidden="true"></i> <?php 
							// จัดให้อยู่ในรูปแบบนี้ ### - #### - ### 
							$mobile = $rsbranch['branch_tel'];
							// กำหนดเครื่องหมาย 
							$minus_sign = "-" ;
							// เริ่มจากซ้ายตัวที่ 1 ( 0 ) ตัดทิ้งขวาทิ้ง 7 ตัวอักษร ได้ 085 
							$part1 = substr ( $mobile , 0 , -6 ) ; 
							// เริ่มจากซ้าย ตัวที่ 4 (9) ตัดทิ้งขวาทิ้ง 3 ตัวอักษร ได้ 9490 
							$part2 = substr( $mobile , 3 , -2 ) ;
							// เริ่มจากซ้าย ตัวที่ 8 (8) ไม่ตัดขวาทิ้ง ได้ 862 
							$part3 = substr( $mobile , 7 ) ; 

						echo $part1. $minus_sign . $part2 . $part3 ;?></a><?php $branch_tel2=$rsbranch['branch_tel2']; 
							if($branch_tel2!=''){
						?>	
						, <a href="<?php echo $rsbranch['branch_tel2'];?>"><i class="fa fa-mobile-phone" aria-hidden="true"></i> <?php 
							// จัดให้อยู่ในรูปแบบนี้ ### - #### - ### 
							$mobile = $rsbranch['branch_tel2'];
							// กำหนดเครื่องหมาย 
							$minus_sign = "-" ;
							// เริ่มจากซ้ายตัวที่ 1 ( 0 ) ตัดทิ้งขวาทิ้ง 7 ตัวอักษร ได้ 085 
							$part1 = substr ( $mobile , 0 , -7 ) ; 
							// เริ่มจากซ้าย ตัวที่ 4 (9) ตัดทิ้งขวาทิ้ง 3 ตัวอักษร ได้ 9490 
							$part2 = substr( $mobile , 3 , -3 ) ;
							// เริ่มจากซ้าย ตัวที่ 8 (8) ไม่ตัดขวาทิ้ง ได้ 862 
							$part3 = substr( $mobile , 7 ) ; 

						echo $part1. $minus_sign . $part2 . $part3 ;
					  ?></a></span>	
						<?php }?>	
					</div>
				</div>
				<hr class="hr-stylish-color">
				<?php }?>
			</div>
		</div>
	</div>
	<?php }?>
</body>
</html>


ส่วนของ json where ดึงข้อมูลมาแสดงบนแผนที่ครับ

Code (PHP)
<?php
	include ('config/mysql_connection_class.php');
	include ('config/connect.php');
	header('Content-Type: application/json');
	$mysqllocation = new MySQL_Connection("$host", "$user", "$pw", "$dbname");
	$mysqllocation->charset = 'utf8';

	$x = $_GET["PROVINCE_CODE"];

	$sqllocation = "SELECT * FROM ssl_branch" ;
	if($x!=null && $x!=""){
		$sqllocation  .= " where PROVINCE_CODE='".$x."'";
	}
	//echo $sqllocation;
	$mysqllocation->query($sqllocation);

	$resultArray = array();
		while($rslocation = $mysqllocation->fetch()){
			array_push($resultArray,$rslocation);
		}
	$conn->close(); 
	echo json_encode($resultArray);
?>


code หลักๆที่ผมใช่อยู่ตอนนี้นะครับ ปัญหาก็ตามที่ผมบอกเลยครับ ดันมากตอนนี้ ข้อมูลบางส่วนผมอาจจะเปิดเผยได้ไม่มากนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-17 12:02:42 By : tomsmile05
 


 

No. 4

Guest


ใช้ maps.setCenter(latLng);

แต่ดูแล้ว เก็บ latLng ไว้หลายที่ งั้นต้องเลือกว่าจะ maps.setCenter(latLng); ที่ไหน หรือไม่ก็กำหนดจุด maps.setCenter(latLng); มาอีกจุดตามแต่ละจังหวัด

ใส่ maps.setCenter(latLng); หลัง $.getJSON({ ...... }); maps.setCenter(latLng);
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-01-18 14:11:58 By : 55555
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอสอบถามเกี่ยวกับการค้นหาสถานที่บน Google map API หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่