Google Maps API）chart.apis.google.comが使えなくなったので、マーカーラベルにMarkerWithLabelを使った。

Google Maps APIを使った地図ページを自分用に運用している。（Google Maps APIを使ったWebアプリを使用するためには、APIキーが必須で、APIキー取得のためにはアカウントにクレジット情報の登録が必須になったので、現在はプライベートな自分用のWebページでのみ使えるようにしている。過去に公開したページはAPIキーが入っていないので正常表示できなくなっている。）

それらの地図ページでマーカーラベルを付けるのに、chart.apis.google.com サービスを利用していたが、2019.3.14よりサービス停止になってしまった。

そこで、代替案を探したところ、MarkerWithLabelというのが見つかった。

教えてもらったのは以下のサイト。

<script src="https://maps.google.com/maps/api/js?v=3&key={API_KEY}"></script>
<script src="js/markerwithlabel.js"></script>

スクリプト

<script>
var marker_l = new MarkerWithLabel({
	map: map,
	position: position,
	icon: new google.maps.MarkerImage('アイコンファイル'),
	labelContent: '地点名',
	labelAnchor: new google.maps.Point(0, 4),
	labelClass: 'labels',
	labelStyle: {opacity: 0.9}
});
</script>

スタイルシート

<style>
.labels {
	color: #000;
	background: #FFC9D0;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 0;
	border: solid 1px red;
	border-radius: 4px;
}
</style>

↓ APIキーがないので、正常には表示されないが、マーカーラベルをMarkerWithLabelに置き換えたサンプルページ。

以下は新旧のマーカーラベルイメージ画像。