8

特定の地域の学校、教会、公園をまとめたページがありますが、3 つの異なるアイコンで 3 つの POI のスタイルを設定したいと考えています。Google やすべてのドキュメントを検索しましたが、答えが見つかりませんでした。

var map;
var infowindow;

function initialize() {

  // Center of Map
  var centerLatlng = new google.maps.LatLng(29.745376, -95.380125);

  // Marker Icons Declaration
  var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47));

  // Map Options
  var myOptions = {
    zoom: 16,
    center: centerLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    icons: icon 
  };

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

  // Marker Icons Implementation
  markers = new google.maps.Marker({ 
    position: centerLatlng,
    map: map, 
    title: 'Center of Map', 
    icon: icon 
  });

  // Services: Places
  var request = {
    location: centerLatlng,
    radius: 800,
    types: ["school", "church", "park"]
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.search(request, callback);

} // function initialize()

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: icon
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
    infowindow.open(map, this);
  });
}
4

1 に答える 1

11

私の簡単で汚いデモを見てください。アイデアは、place.types配列を使用して、マップに追加しようとしている場所の種類を決定することです。この配列の最初の項目 (通常は 2 つまたは 3 つの項目の長さ) に単純にマーカーを割り当てました。これは次のようになります。

["school", "establishment"]

場合によっては、「大学」が「学校」の前に来るため、「大学」のアイコンが使用されます。タイプとアイコンを一致させる方法、つまり、学校または大学を優先する方法を改善したいですか? おそらく、正しい型を探して配列を反復処理します。1 つの場所 (general_contractor) がアイコンのリストにないため、デフォルトのピン マーカーがそこに配置されます。iconType実際に目的のタイプがあるかどうかを確認した場合は、「デフォルト」アイコンを使用できます。これらの詳細はあなたに任せます=）

アイコンに使用したソースは次のとおりです: https://sites.google.com/site/gmapsdevelopment/

function createMarker(place) {
    var placeLoc = place.geometry.location;

    var iconType = {};
    iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
    iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
    iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
    iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: iconType[place.types[0]]
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
        infowindow.open(map, this);
    });
}

または、switch ステートメントを使用します。

function createMarker(place) {
    var placeLoc = place.geometry.location;

    var iconUrl;
    switch (place.types[0]) {
    case 'school':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
        break;
    case 'church':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
        break;
    case 'park':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
        break;
    case 'university':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
        break;
    default:
        iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png";
    }

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: iconUrl
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
        infowindow.open(map, this);
    });
}
于 2012-06-29T22:50:55.380 に答える