質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3043閲覧

Googlemapに複数のマーカー(画像)を表示させる方法

seokjin

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/28 14:12

はじめまして。
javascriptを使用し1つのGoogle mapにマーカーを3つ表示させたいのですが
可能でしょうか?
現在、このように一つのマーカーを表示させているのですが、

var myLatlng = new google.maps.LatLng(●, ●);

function initialize() {
var mapOptions = {
zoom : 16,
center : myLatlng,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

var image = {
url : 'images/maphere.png',
scaledSize : new google.maps.Size(300, 90)
// ↑ここで画像のサイズを指定
}

var marker = new google.maps.Marker({
position : myLatlng,
map : map,
icon : image,
title : "●"
});

}
google.maps.event.addDomListener(window, 'load', initialize);

あと2つ画像のマーカーとして追加したいです。
ご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

複数追加。

js

1var marker1 = new google.maps.Marker({ 2 position: new google.maps.LatLng(,), 3 map: map, 4 icon: { 5 url: 'images/maphere.png', 6 scaledSize: new google.maps.Size(300, 90) 7 }, 8 title: "●" 9}); 10var marker2 = new google.maps.Marker({ 11 position: new google.maps.LatLng(,), 12 map: map, 13 icon: { 14 url: 'images/maphere.png', 15 scaledSize: new google.maps.Size(300, 90) 16 }, 17 title: "●" 18}); 19var marker3 = new google.maps.Marker({ 20 position: new google.maps.LatLng(,), 21 map: map, 22 icon: { 23 url: 'images/maphere.png', 24 scaledSize: new google.maps.Size(300, 90) 25 }, 26 title: "●" 27}); 28

【マーカーの作成 - マーカー - Google Maps JavaScript API入門】
https://www.javadrive.jp/google-maps-javascript/gmarker/index1.html

【Markers  |  Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/markers

投稿2020/04/09 17:57

kei344

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seokjin

2020/04/10 18:37

とても分かりやすく説明いただきありがとうございます。勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問