ต่อไป »

[nornak]

ช่วยหน่อยครับ พอดีผมต้องการ mark จุดหลายๆจุดต้องทำยังไงครับ ให้มันขึ้นแบบโค้ดนี้ครับ โดยเรียกจาก MySQL อีกที

พอดีไม่ค่อยรู้เรื่องครับ งูๆปลาๆ จับใส่ไปมางงเลย เอาไปใช้กับ PHP นะครับ

ขอบคุณมากครับ

โค๊ด:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(15.11831,104.90217);

    var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var contentString = 'มหาวิทยาลัยอุบลราชธานี' '<table><tr><td><img src="http://reg.ubu.ac.th/registrar/images/thai/logo/u_logo.jpg"   width="117" height="95"  /></td></tr></table>';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'มหาวิทยาลัยอุบลราชธานี'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
  
</script>

[nornak]

เข้าไปหลงอยู่ใน hปปp://code.google.com/apis/maps/documentation/javascript/tutorial.html นานสองนานครับช่วยผมที

 

[nornak]

 

[dekdee]

http://a-sa.net/
ที่ผมเขียนไว้ครับ ยังไงเข้าไปหน้าแรกแล้วคลิกขวา view source เอาก็เจอ script ที่ผมเขียนไว้ด้านบนแล้วครับ

[ngokung]

เข้าไปหลงอยู่ใน hปปp://code.google.com/apis/maps/documentation/javascript/tutorial.html นานสองนานครับช่วยผมที

มันไม่มีเรื่องmarker นี่เพจที่คุณอ่าน ให้ดูเรื่อง market ใน page นี้แทนครับ

http://code.google.com/apis/ma...ation/javascript/overlays.html

[nornak]

http://a-sa.net/
ที่ผมเขียนไว้ครับ ยังไงเข้าไปหน้าแรกแล้วคลิกขวา view source เอาก็เจอ script ที่ผมเขียนไว้ด้านบนแล้วครับ

เข้าไปแล้วเจอ google map สีฟ้าๆ ครับ แล้ว view ดูแล้ว

คือผมอยากทำให้มัน mark ได้หลายๆจุด โดยเรียกจากฐานข้อมูลครับ โดยใช้ภาษา php

[nornak]

เข้าไปหลงอยู่ใน hปปp://code.google.com/apis/maps/documentation/javascript/tutorial.html นานสองนานครับช่วยผมที

มันไม่มีเรื่องmarker นี่เพจที่คุณอ่าน ให้ดูเรื่อง market ใน page นี้แทนครับ

http://code.google.com/apis/ma...ation/javascript/overlays.html

อ๋อ ผมเข้าไปดูแล้วครับ จึงได้ code มาตามที่ผมแสดงไว้โพสแรกแล้วครับ

[nornak]

ช่วยทีครับ 

[ngokung]

อ่อ ถ้าดึงออกมาได้แล้ว แต่ต้องการแบบหลาย ๆ อัน คุณต้องเข้าใจเรื่อง Server Side Script (PHP) กับ Client Side Script (Javascript - Google Map) ถ้าคุณเข้าใจเรื่องนี้อยู่แล้ว หรือทำความเข้าใจเรียบร้อยแล้ว คุณจะสามารถประยุกต์ใช้ได้อีกเยอะครับ รวมถึงงานอีกหลาย ๆ งานในสายเว็บโปรแกรมมิ่งด้วย

หลักการง่าย ๆ ก็คือ

client side ------- ร้องขอเพจ abc.php จาก server --------> server side (แปลง code php ทั้งหมดให้กลายเป็น html หรือ script)

จากนั้น

client side <------- ส่งข้อมูลที่ถูกแปลง -------- server side (ส่งข้อมูลกลับโดยไม่มี php code อยู่ในนั้นอีกต่อไป เพราะ browser อ่านไม่ออก)

ในกรณีนี้อยากให้คุณลองเขียน

โค๊ด:

<?php 

$a[] = "111,222";
$a[] = "333,444";

for($i=0;$i < sizeOf($a); $i++){
?>

var myLatlng = new google.maps.LatLng(<?php echo $a[$i]?>);

<?php
}
?>

จากนั้นให้ลอง view source ดู คุณน่าจะรู้ว่าการนำ php มาผสานกับ client side script อย่าง javascript นั้นทำได้ยังไง ลองดูครับ

[nornak]

ได้แล้วครับ แต่ติดปัญหาใหม่ คืออยากให้คลิกที่ maker แล้วขึ้นกล่องข้อความครับ

โดยจาก code

โค๊ด:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript">

  var ubu = new google.maps.LatLng(15.11831,104.90217);

  var neighborhoods = [
  <?php 
$a[] = "15.11831,104.90217";
$a[] = "15.12231,104.90217";
$a[] = "15.12231,104.92217";
for($i=0;$i < sizeOf($a); $i  ){
?>
new google.maps.LatLng(<?php echo $a[$i]?>),
<?php } ?> ];

  var markers = [];
  var iterator = 0;

  var map;

  function initialize() {
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ubu
    };

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

     for (var i = 0; i < neighborhoods.length; i  ) {
      setTimeout(function() {
        addMarker();
      }, i * 200);
    }	
  }

  function addMarker() {
    markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    }));
    iterator  ;
  }
</script>

ผมจะใส่ code นี้ไว้ตรงไหนครับ

โค๊ด:

  var contentString = 'test text text';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

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

[ngokung]

ได้แล้วครับ แต่ติดปัญหาใหม่ คืออยากให้คลิกที่ maker แล้วขึ้นกล่องข้อความครับ

โดยจาก code

โค๊ด:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript">

  var ubu = new google.maps.LatLng(15.11831,104.90217);

  var neighborhoods = [
  <?php 
$a[] = "15.11831,104.90217";
$a[] = "15.12231,104.90217";
$a[] = "15.12231,104.92217";
for($i=0;$i < sizeOf($a); $i  ){
?>
new google.maps.LatLng(<?php echo $a[$i]?>),
<?php } ?> ];

  var markers = [];
  var iterator = 0;

  var map;

  function initialize() {
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ubu
    };

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

     for (var i = 0; i < neighborhoods.length; i  ) {
      setTimeout(function() {
        addMarker();
      }, i * 200);
    }	
  }

  function addMarker() {
    markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    }));
    iterator  ;
  }
</script>

ผมจะใส่ code นี้ไว้ตรงไหนครับ

โค๊ด:

  var contentString = 'test text text';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

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

1. ก่อนที่คุณจะใช้ markers.push คุณสร้างตัวแปรสำหรับ marker ขึ้นมาก่อน
2. ให้เอา info window มาผูกกับ click event ของ marker ที่สร้างขึ้นมาใหม่ (โดยใช้ตัวแปรที่เพิ่งสร้างขึ้นมาจากข้อ 1 เป็นตัวอ้างถึง) --- ก็คือใส่ info window เข้าไปที่แต่ละรอบของ การสร้าง marker ไปเลย
3. จากนั้นก็ค่อยใช้ push เข้าไปใน markers (อาจจะไม่จำเป็นต้อง push อีก ถ้าไม่คิดว่าจะอ้างอิงมาใช้ในภายหลัง)

2 กับ 3 คิดว่าน่าจะสลับกันได้นะ ลองดูครับ

[nornak]

ได้แล้วครับ แต่ติดปัญหาใหม่ คืออยากให้คลิกที่ maker แล้วขึ้นกล่องข้อความครับ

โดยจาก code

โค๊ด:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript">

  var ubu = new google.maps.LatLng(15.11831,104.90217);

  var neighborhoods = [
  <?php 
$a[] = "15.11831,104.90217";
$a[] = "15.12231,104.90217";
$a[] = "15.12231,104.92217";
for($i=0;$i < sizeOf($a); $i  ){
?>
new google.maps.LatLng(<?php echo $a[$i]?>),
<?php } ?> ];

  var markers = [];
  var iterator = 0;

  var map;

  function initialize() {
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ubu
    };

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

     for (var i = 0; i < neighborhoods.length; i  ) {
      setTimeout(function() {
        addMarker();
      }, i * 200);
    }	
  }

  function addMarker() {
    markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    }));
    iterator  ;
  }
</script>

ผมจะใส่ code นี้ไว้ตรงไหนครับ

โค๊ด:

  var contentString = 'test text text';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

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

1. ก่อนที่คุณจะใช้ markers.push คุณสร้างตัวแปรสำหรับ marker ขึ้นมาก่อน
2. ให้เอา info window มาผูกกับ click event ของ marker ที่สร้างขึ้นมาใหม่ (โดยใช้ตัวแปรที่เพิ่งสร้างขึ้นมาจากข้อ 1 เป็นตัวอ้างถึง) --- ก็คือใส่ info window เข้าไปที่แต่ละรอบของ การสร้าง marker ไปเลย
3. จากนั้นก็ค่อยใช้ push เข้าไปใน markers (อาจจะไม่จำเป็นต้อง push อีก ถ้าไม่คิดว่าจะอ้างอิงมาใช้ในภายหลัง)

2 กับ 3 คิดว่าน่าจะสลับกันได้นะ ลองดูครับ

 1 ขอบคุณครับ

ถ้าไม่ได้ยังไงรบกวนอีกนะครับ

[ohmohm]

ลองพิจารณา KML เป็นอีกทางเลือก ตัวอย่าง
http://code.google.com/apis/ma...amples/layer-kml-features.html
แก้ suppressInfoWindows: true เป็น false จะได้กล่องข้อความเด้งขึ้นมา