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

Registered : 109,038

HOME > PHP > PHP Forum > Google Map เปลี่ยนสี Marker ตามเงื่อนไขที่กำหนดทำอย่างไรหรอครับ


[PHP] Google Map เปลี่ยนสี Marker ตามเงื่อนไขที่กำหนดทำอย่างไรหรอครับ

 
Topic : 132586



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



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



พอดีลองศึกษาโค้ดจากGoogle แล้วแต่อยากทราบวิธีเปลี่ยน marker ตามเงื่อนไขอะครับ

Code (JavaScript)
001.<!DOCTYPE html >
002.  <head>
003.    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
004.    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
005.    <title>แผนผังการเดินทาง</title>
006.    <style>
007.      /* Always set the map height explicitly to define the size of the div
008.       * element that contains the map. */
009.      #map {
010.        height: 100%;
011.      }
012.      /* Optional: Makes the sample page fill the window. */
013.      html, body {
014.        height: 100%;
015.        margin: 0;
016.        padding: 0;
017.      }
018.    </style>
019.  </head>
020. 
021.  <body>
022.    <iframe style="width:2000px;height:30px" scrolling="no" src="iframe.php">
023.</iframe>
024.    <div id="map"></div>
025. 
026.    <script>
027.      var customLabel = {
028.        มรณภาพ: {
029.          label: 'ม'
030.        },
031.        บรรพชา: {
032.          label: 'บ'
033.        },
034.        จำพรรษาตอนนี้: {
035.          label: 'จ'
036.        },
037.        เคยจำพรรษา: {
038.          label: 'ค'
039.        },
040.        ลาสิกขา: {
041.          label: 'ล'
042.        }
043.      };
044. 
045.        function initMap() {
046.        var map = new google.maps.Map(document.getElementById('map'), {
047.          center: new google.maps.LatLng(13.847860,100.604274),
048.          zoom:6
049.        });
050.        var infoWindow = new google.maps.InfoWindow;
051.<?php $Label="$_GET[Label]";?>
052.          // Change this depending on the name of your PHP or XML file
053.          downloadUrl('sas.php?Label=<?php echo $Label?>', function(data) {
054.             
055.            var xml = data.responseXML;
056.            var markers = xml.documentElement.getElementsByTagName('marker');
057.            Array.prototype.forEach.call(markers, function(markerElem) {
058.              var idmap = markerElem.getAttribute('idmap');
059.               var point = new google.maps.LatLng(
060.                  parseFloat(markerElem.getAttribute('la')),
061.                  parseFloat(markerElem.getAttribute('lo')));
062.              var Temple_name = markerElem.getAttribute('Temple_name');
063.              var Label = markerElem.getAttribute('Label');
064.              var mtyear = markerElem.getAttribute('mtyear');
065.              var type = markerElem.getAttribute('type');
066.              
067. 
068.              var infowincontent = document.createElement('div');
069.              var strong = document.createElement('strong');
070.              strong.textContent = Temple_name
071.              infowincontent.appendChild(strong);
072.              infowincontent.appendChild(document.createElement('br'));
073. 
074.              var text = document.createElement('text');
075.              text.textContent = mtyear
076.              infowincontent.appendChild(text);
077.               
078.              var icon = customLabel[type] || {};
079.              var marker = new google.maps.Marker({
080.                map: map,
081.                position: point,
082.                label: icon.label
083.              });
084.              marker.addListener('click', function() {
085.                infoWindow.setContent(infowincontent);
086.                infoWindow.open(map, marker);
087.              });
088.            });
089.          });
090. 
091.        }
092. 
093. 
094. 
095.      function downloadUrl(url, callback) {
096.        var request = window.ActiveXObject ?
097.            new ActiveXObject('Microsoft.XMLHTTP') :
098.            new XMLHttpRequest;
099. 
100.        request.onreadystatechange = function() {
101.          if (request.readyState == 4) {
102.            request.onreadystatechange = doNothing;
103.            callback(request, request.status);
104.          }
105.        };
106. 
107.        request.open('GET', url, true);
108.        request.send(null);
109.      }
110. 
111.      function doNothing() {}
112.    </script>
113.    <script async defer
115.    </script>
116.  </body>
117.</html>




Tag : PHP

Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-11-19 16:45:43 By : Bombermanzzzzzzz View : 2605 Reply : 1
 

 

No. 1



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

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

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

ใช้รูปภาพครับ

icon: 'images/camping-icon.png',


Google Maps API การปักหมุด (Marker) บนแผนที่ จาก Lat,Lon และรายละเอียด

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-11-20 08:53:35 By : mr.win
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : Google Map เปลี่ยนสี Marker ตามเงื่อนไขที่กำหนดทำอย่างไรหรอครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





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