api - Google マップ API V3: 道路名を追加するには?

Question

グーグルマップ初心者です。Google マップに車を表示するアプリケーションを開発していますが、Google マップにはほとんどの道路の名前 (ラベル) がありません。ユーザーがこれらの名前をマップに追加できるようにするシステムを開発したいと考えています。位置と名前はデータベースに保持されます。私の質問は、javascript を使用して地図上に道路名を追加する方法です。名前と位置を JavaScript コードの関数に送信できますが、ユーザーがアプリケーションを閉じるまでこれらの名前を一時的にマップに追加する API が必要です。ズーム レベルを増減すると、道路名が大きくなったり小さくなったり、消えたりすることがわかります。通常のマーカーでは、これを行うことはできません。

Answer 1

1 つのオプションは、InfoBoxを使用することです。

その一例がこちら

フォントのサイズを変更したり、ズーム レベルに応じて InfoBox を表示しないようにするコードを記述できます (上記の例では、十分にズームインしている場合にのみ InfoBox が表示されます)。

コードスニペット：

var geocoder = null;
var layer = null;
var map = null;
var labels = [];
var infowindow = null;
var address = "4200 East Palm Canyon Dr, Palm Springs CA";

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(33.796, -116.5);
  var myOptions = {
    zoom: 18,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


  layer = new google.maps.KmlLayer("http://www.geocodezip.com/ParkerPalmSprings.xml", {
    preserveViewport: true,
    suppressInfoWindows: true
  });
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", openIW);

  var i = 0;
  labels.push(new InfoBox({
    content: "Gene Autry Residence",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7967, -116.500632),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "North Building",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7965, -116.4997),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "South Building",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "40px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-20, 0),
    position: new google.maps.LatLng(33.7954, -116.4998),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    /*           content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'>&nbsp;East Parking Lot&nbsp;</div>"*/
    content: "East Parking Lot",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "40px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-20, 0),
    position: new google.maps.LatLng(33.7958, -116.4996),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Lobby",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.79525, -116.50017),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Mr Parkers",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "40px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-20, 0),
    position: new google.maps.LatLng(33.79543, -116.50045),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Ballroom",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.79597, -116.50095),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "PSYC",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7957, -116.50088),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Autry Lawn",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.797, -116.50075),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "North Parking Lot",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "150px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-75, 0),
    position: new google.maps.LatLng(33.7971, -116.500),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Tennis Courts",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7971, -116.50115),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);


  labels.push(new InfoBox({
    content: "Petanque Courts",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7963, -116.50075),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Palm Court",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.79597, -116.50045),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);


  labels.push(new InfoBox({
    content: "Autry Pool",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "7pt",
      width: "35px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-17, 0),
    position: new google.maps.LatLng(33.79625, -116.50106),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Picnic Area",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.796345, -116.50123),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);


  labels.push(new InfoBox({
    content: "<div style='fontSize: 8pt;width: 15px;writing-mode: tb-rl;'>&nbsp;Backyard&nbsp;</div>",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "10px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(0, 0),
    position: new google.maps.LatLng(33.7965, -116.5014),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Croquet Lawn",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.79595, -116.4999),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Firepit",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.79591, -116.50019),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Villa" /* (James, Noah, Max, Zoe) */ ,
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.79619, -116.50051),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);


  labels.push(new InfoBox({
    content: "Villa" /* (Jake, Lola, Ian, Remi) */ ,
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.79619, -116.50016),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Villa" /* (Ben, Julia, Joey, Jayda) */ ,
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "30px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-15, 0),
    position: new google.maps.LatLng(33.7965, -116.50033),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);


  labels.push(new InfoBox({
    content: "North Pool",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "7pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.796455, -116.50002),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  labels.push(new InfoBox({
    content: "Great Lawn",
    boxStyle: {
      border: "1px solid black",
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(33.7975, -116.50115),
    closeBoxURL: "",
    isHidden: false,
    enableEventPropagation: true,
    pane: "mapPane"
  }));
  labels[i++].open(map);

  function showLabels() {
    for (var i = 0; i < labels.length; i++) {
      labels[i].setMap(map);
    }
  }

  function hideLabels() {
    for (var i = 0; i < labels.length; i++) {
      labels[i].setMap(null);
    }
  }


  var ParkerPalmSprings = new google.maps.LatLng(33.795451, -116.500116);

  var marker = createMarker(ParkerPalmSprings,
    "Parker Palm Springs",
    '<b>Parker Palm Springs</b><br>4200 East Palm Canyon Dr<br>Palm Springs CA<br>');
  google.maps.event.trigger(marker, 'click');


  var MercedesBenzOfPalmSprings = new google.maps.LatLng(33.794431, -116.501985);

  var MBmarker = createMarker(MercedesBenzOfPalmSprings,
    "Mercedes-Benz of Palm Springs",
    '<b>Mercedes-Benz of Palm Springs</b><br>4095 East Palm Canyon Drive<br>Palm Springs CA<br>');


  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() >= 18) {
      showLabels();
    } else {
      hideLabels();
    }
  });

  google.maps.event.addListener(map, "click", function() {
    infowindow.close();
  });
}

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 100)
});

function openIW(KMLevent) {
  infowindow.close();
  infowindow.setOptions({
    content: '<div style="height:100;width:250">' + KMLevent.featureData.infoWindowHtml + '</div>',
    position: KMLevent.latLng,
    pixelOffset: KMLevent.pixelOffset
  });
  infowindow.open(map);
}

function createMarker(latlng, title, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: title,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.close();
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>