อยากให้ marker google map ขึ้นรูปแต่ละ user ต้องทำอย่างไรคะ

คือตอนนี้ทำระบบดูตำแหน่งล่าสุดของแต่ละสมาชิกในกลุ่มคือกดมาแล้วดูได้เลยว่าทุกคนในกลุ่มอยู่ตรงไหนบ้าง แต่ตอนนี้ไม่สามารถเอารูปลงไปใส่ได้ เอาไปใส่ได้เพียงรูปที่กำหนดเปน url ไว้เท่านั้น อยากทราบว่าต้องทำอย่างไรคะ

โค้ดแบบนี้คะ

<?php
$username=$_SESSION['user'];

  $sql1 = "SELECT familyid FROM user WHERE name = '$username'"; 
    $result1= mysql_query($sql1);
  $row1 = mysql_fetch_array($result1);
  $famid1 = $row1['familyid'] ;

if($famid1=='0'){
  echo '<span style="color:red;text-align:center;">กรุณาสร้างครอบครัวที่โทรศัพท์มือถือของท่านก่อนคะ</span>';
}

else{


 $sql = "SELECT t.name,t.longtitude, t.latitude, u.picture ,MAX(t.trackingtime) 
FROM user AS u, famid AS fd, tracking AS t
WHERE t.name = u.name AND fd.familyid = u.familyid AND fd.familyid ='$famid1'GROUP BY t.name";

//$sql = "SELECT * FROM tracking WHERE name='".$user."' ";
$objQuery = mysql_query($sql);
    
      
?>



<div class="col-md-10" style="padding-top:40px" >

<div id="map_canvas"></div>

<script type="text/javascript">   
 var locations = [  
<?php while($objResult = mysql_fetch_array($objQuery))
            {
            ?>
      ['<?php echo $objResult["name"];?> <br/> <?php echo $objResult["MAX(t.trackingtime)"];?> <br/> <?php echo $objResult["latitude"];?>,<?php echo $objResult["longtitude"];?>',<?php echo $objResult["latitude"];?>,<?php echo $objResult["longtitude"];?>],   <!--word,latitude,long-->
   
          <?php } ?>
        
  
  ];    
var map = new google.maps.Map(document.getElementById('map_canvas'), {      
zoom: 6,      
center: new google.maps.LatLng(15.105355046221582, 104.31570053100586),      
mapTypeId: google.maps.MapTypeId.ROADMAP   
});    
var infowindow = new google.maps.InfoWindow();  
var image = {
    url: 'http://happyhome.backend.in.th/tetetest/uploads/pink.png',
    size: new google.maps.Size(50, 50),
    scaledSize: new google.maps.Size(50, 50),
        // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(100, 100)






  };

  
var marker, i;    for (i = 0; i < locations.length; i++) {        
marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     icon: image,
    map: map 
    });   

google.maps.event.addListener(marker, 'click', (function(marker, i) {          <!--zoomclick-->
return function() {         
 infowindow.setContent(locations[i][0]); 
 map.setZoom(16);
 map.setCenter(marker.getPosition());
 infowindow.open(map, marker);        
 }      
 })
 (marker, i));    
 }  
 </script>

 

 </div><!-- 10 -->

<?php } ?>

ตอนนี้ที่ได้แบบนี้คะ
http://pic.free.in.th/id/f8a8b3079efc383e5b89d2b366d191a5


อยากได้เป็นแบบนี้คะ
http://pic.free.in.th/id/4117cd3fe6b5d70df633b768b5f6c3ea


ขอบคุณคะ

ลองทำเป็นแบบไฟล์ xml โดยดึงข้อมูลจากฐานข้อมูลให้ได้ประมาณนี้

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml
https://www.ninenik.com/content.php?arti_id=336

ส่วนการใส่รูปคนเข้าไป ก็จะสามารถประขุกต์ต่อได้ง่ายๆ
โดยประยุกต์ จากเนื้อหานี้

เพิ่ม icons แบบกำหนดเอง สำหรับ marker ใน google map v3  

https://www.ninenik.com/content.php?arti_id=467