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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Q&A

解決済

1回答

1734閲覧

Google Map Api の 一つの画像から複数のマーカーを使用

maeyoake

総合スコア37

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

1グッド

0クリップ

投稿2016/03/14 07:13

編集2016/04/05 01:39

下記の三つの画像のように進めようと思っているのですが、マーカーが出現してくれません。

コード❶

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://maps.google.com/maps/api/js?key=AIzaSyDhcnBXUPKNXl77AkFFwxAQUfNFo2l2iko&sensor=false"></script> <script src="map.js"></script> </head> <body> <style> #mapDiv { position: relative; } .info { position: absolute; top: 30px; right: 0; width: 150px; height: 150px; background-color: #FFFFCC; z-index: 1; } </style> <div id="mapDiv" style="width: 400px; height:400px;"> </div> </body> </html>

コード❷

jQuery(function ($) { var ns = google.maps, myLatlng = new ns.LatLng(35.66, 139.73), mapElement = document.getElementById("mapDiv"), mapOptions = { zoom: 12, center: myLatlng }, map = new ns.Map(mapElement, mapOptions), places = new ns.MVCArray([ new ns.LatLng(35.681391, 139.766103),// 東京 new ns.LatLng(35.689729, 139.700464),// 新宿 new ns.LatLng(35.62876, 139.738999)// 品川 ]); places.forEach(function (place, num) { var marker = new ns.Marker({ position: place, map: map, icon: { url: 'spritesheet.png', origin: new ns.Point(70 * num, 0),// size: new ns.Size(20, 34) } }); }); });

画像取得先で画像をダウンロードし、ダウンロードした画像の中から5項目を選び、ZIPで圧縮し、CSS Sprite Generatorで画像を取得したはずなのですが、うまくいきません。
おそらくCSS Sprite Generatorのアップロードの仕方が間違って居るのだろうと思いますが、「圧縮してそれをこのサイトにアップして一つの画像にして取得する」と言う教科書の概念がよくわかりません。
一応下の画像が、圧縮したファイル(左下)と、圧縮したファイルの中身(右下)と、CSS Sprite Generatorで作ったpng(上)です。
イメージ説明

よろしくお願いいたします。

lilithchan👍を押しています

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

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

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

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

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

unau

2016/03/14 08:39

CSS Sprite Generator で作ったとされる png (spritesheet.png) は望んでいる画像とは違うのですか。五つのマーカーが一つの画像になっているように見えますが。
maeyoake

2016/03/14 09:18

はい、ソースに乗せたようにurlにspritesheet.pngを指定はしているのですが、表示されません。これで普通は表示されるものなのでしょうか?
maeyoake

2016/03/14 09:37

ソースコードはそちらに表示されていますか?
unau

2016/03/14 09:43

すみません、「ソースに乗せたように」とのことですが、どの部分のことでしょうか。添付された写真 4 点のうち、最初の三つは参考にされている書籍の内容、最後の一つは画像だけに見えるのですが。 ご自身のソースコードはここに示すことはできないのですか。
maeyoake

2016/03/15 05:43

すみません、テラテイルの使い方がいまいちよくわからなかったので、直接コードを質問に書きました。 よろしくお願いいたします。
maeyoake

2016/03/15 05:44

もしかしたら、コードがどこかおかしいのかもしれません。
guest

回答1

0

ベストアンサー

回答にはなっていません。確認していただきたいことがあります。

参考にされているスプライト画像と、ご自身で作られたスプライト画像を見ると、マークの大きさ、間隔が違うようです。

イメージ説明

スクリーンショットの画像を測ってみると、maeyoake さんのスプライト画像のマークは高さ 43px (くらい)、幅 26px (くらい) で間隔が 124px (くらい) でした。縮尺の違いがあるので正確なピクセル数はわかりませんが、例の赤いマークでは幅 20px の 2.5倍の間隔の 50px なのに対して、maeyoake さんの青いマークでは 5 倍の間隔が空いているのは確かです。

間隔が間違っているとしても最初のマークは出そうに思いますが、それも出ていませんか。

作られたスプライト画像におけるマーカーのサイズ、間隔をちゃんと測るとよいのではないでしょうか。

あと、スプライト画像を作るには、今回お使いの「CSS Sprite Generator」を使う以外の方法もいろいろあります。「CSS Sprite Generator」でも、zip ファイルでアップロードする以外にも一つ一つドラッグ&ドロップで足していく方法もあるみたいですよね(試していませんが)。

投稿2016/03/16 01:15

unau

総合スコア2468

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

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

maeyoake

2016/03/16 06:17

特に編集もしていないpngで試すと、それがちゃんとアップされました。 しかしCSS Sprite Generatorで編集すると出てこなくなります。 なぜでしょうか。
maeyoake

2016/03/16 06:18

一枚に幾つかの画像を連結させるところが違っているのかもしれません。教科書通りにやってはいるつもりなのですが。
maeyoake

2016/03/16 06:25

すみません、画像の大きさの問題だったようです! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問