Googleマップにさまざまなマーカーの色を設定するにはどうすればよいですか？

-4

データベースから取得するタイプに応じて別のカラーマーカーを設定したいとします。たとえば、タイプがFIREで、マーカーを赤色にしたいとします。出来ますか？Googleマップにさまざまなマーカーの色を設定するにはどうすればよいですか？

はここでここで私は、データベースからデータを取得し、私のget.phpある

(function(){ 

      var map,marker,latlng,bounds,infowin; 
      /* initial locations for map */ 
      var _lat=14.676; 
      var _lng=121.0437; 



      function showMap(){ 
       /* set the default initial location */ 
       latlng={ lat: _lat, lng: _lng }; 

       bounds = new google.maps.LatLngBounds(); 
       infowin = new google.maps.InfoWindow(); 

       /* invoke the map */ 
       map = new google.maps.Map(document.getElementById('map'), { 
        center:latlng, 
        zoom: 10 
       }); 

       /* show the initial marker */ 
      marker = new google.maps.Marker({ 
       position:latlng, 
       map: map, 
       title: 'Hello World!' 
      }); 




       bounds.extend(marker.position); 


       /* jQuery */ 
       $.ajax({ 
        url: 'get.php', 
        data: {'ajax':true }, 
        dataType: 'json', 
        success: function(data, status){ 
         $.each(data, function(i,item){ 
          /* add a marker for each location in response data */ 
          addMarker(item.lat, item.lng, item.username); 
         }); 
        }, 
        error: function(){ 
         output.text('There was an error loading the data.'); 
        } 
       });     
      } 

      /* simple function just to add a new marker */ 
      function addMarker(lat,lng,title){ 
       marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */ 
        position:{ lat:parseFloat(lat), lng:parseFloat(lng) }, 
        map:map, 
        title:title 

       }); 

       google.maps.event.addListener(marker, 'click', function(event){ 
        infowin.setContent(this.title); 
        infowin.open(map,this); 
        infowin.setPosition(this.position); 
       }.bind(marker)); 

       bounds.extend(marker.position); 
       map.fitBounds(bounds); 
      } 


      document.addEventListener('DOMContentLoaded', showMap, false); 
     }()); 
    </script> 
    <style> 
     html, html body, #map{ height:100%; width:100%; padding:0; margin:0; } 
    </style> 
</head> 
<body> 
    <div id='map'></div> 

</body>

私maps.html

です。あなたはすべてのマーカーをダウンロードすることができ、このリンクから http://www.benjaminkeen.com/google-maps-coloured-markers/ - ：

$mysql ="SELECT lat,lng,username,type FROM `tbl_coordinates`"; 
$result = mysqli_query($connect, $mysql); 
if (!empty($result)) 
{ 

while ($row=mysqli_fetch_array($result)) 
{ 
    $latlng[] = array(
    'lat' => $row['lat'], 
    'lng' => $row['lng'], 
    'username' => $row['username'], 
    'type' => $row['type'], 



    ); 

    } 
    } 

    mysqli_close($connect); 

    header('Content-type:application/json;charset=utf-8'); 
    echo json_encode($latlng); 
    ?>

出典

2016-09-15 Monds

バージョンのGoogle APIに取り組んでいる、色を使用して確認してください？ – Bhavin

google maps api v3 – Monds

質問する前に検索してください:: http://stackoverflow.com/questions/24697284/google-api-multiple-markers-with-different-colours-depending-on-a-class/24697331# 24697331 – HoangHieu

あなたは、以下の機能に

/* show the initial marker */ 
     marker = new google.maps.Marker({ 
      position:latlng, 
      map: map, 
      title: 'Hello World!', 
      icon: 'marker1.png' // path of your icon image. 
     });

の1以上のパラメータiconを追加し、このリンクを訪問する必要があります。だから、このマーカーの画像をあなたのディレクトリに置き、その画像へのパスをiconのパラメータで与えます。これは、Googleマップに他のマーカーを追加する最も簡単な方法です。

EDIT：

だから、そのためにあなたはそれが色だ場合のような状態のを配置する必要があり、赤いアイコンを入れ、その後赤です。洪水の場合は洪水のアイコンよりも。

値が$color = 'red'の場合は、 JavaScriptでよりPHP から、このようにそれを置く、

var color = <?php echo $color; ?>

その後、

if(color == 'red') 
{ 
     icon: 'red.png' 
} 
if(color == 'blue') 
{ 
     icon: 'flood.jpg'   
}

出典

2016-09-15 09:01:48 Bhavin

@Bhavinのお返事ありがとうございます！しかし、私がFLOODのような別のタイプを取得したときはどうなりますか？マーカーをカラーの青色にしたいのですか？ – Monds

Photoshopやその他のツールでFLOODなどの画像を作成することができます。その画像を画像のディレクトリに置き、その画像のパスをiconパラメータに渡します。単純です:) – Bhavin

いいえ、そうではありません。私が望むのは、タイプを設定して、マーカーの色を自動的に変更することです。たとえば私のデータベースから来たタイプはFLOODです。データベースから取得するTYPEがFLOODなので、マーカーを自動的に青色に設定します。 – Monds

Googleマップにさまざまなマーカーの色を設定するにはどうすればよいですか？

答えて

関連する問題