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

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

ただいまの
回答率

88.78%

GoogleMapAPIで最初に表示される場所を変える方法

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,280

koridentetsu

score 14

概要

以前に投稿した質問(https://teratail.com/questions/113919)と一部重複になりますが、GooglemapAPIを利用して、オリジナルの地図を、スクロールしたり拡大縮小したりできるようなページを作っているのですが、最初に表示される地点を変更するにはどうすれば良いでしょうか?

コードは以下です。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>想像地図(城栄国)スクロールマップ</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
  <script type="application/javascript" src="index.js"></script>
</head>
<body>
   <div id="map_canvas">
   地図を読み込んでいます。1分以上待っても表示されない場合は JavaScript を有効にしてください。
   もしくは <a href="http://souzoumap.webcrow.jp/Maps/Maps.HTM">想像地図をPDF・PNGでみる</a>
 </div>
google.maps.event.addDomListener(window, "load", function () {
  var oMapCanvas = document.getElementById("map_canvas");

  // Custom Map Tile Layer
  var customMapType = new google.maps.ImageMapType({
    name: "道路",
    tileSize: new google.maps.Size(1681, 2377),
    isPng: true,
    maxZoom: 17, //最大詳細
    minZoom: 16, //最小広域
    getTileUrl: function(coordinate, zoom) {
      var zoom = zoom; //いま追加
      var x = coordinate.x >> 0; // 初期位置をプラスで右へ ※ズーム位置がずれるので使わない
      var y = coordinate.y >> 0; // 初期位置をマイナスで上へ ※ズーム位置がずれるので使わない

      return "../tile_" + zoom + "/jm_" + zoom + "_" + y + "_" + x + ".png"
       .replace("%zoom", zoom.toString())
       .replace("%x", x.toString())
       .replace("%y", y.toString());
    }
  });
  var map = new google.maps.Map(oMapCanvas, {
    zoom: 17, //最初に表示したときのズームレベル (17→5万, 16→10万, 15→20万)
    center: new google.maps.LatLng(85.0511287798066,-180),
    disableDefaultUI: true,
    panControl: true,
    mapTypeId: customMapType.name
  });
  map.mapTypes.set(customMapType.name, customMapType);

  google.maps.event.addListener(map, 'zoom_changed', function() {//
    dispLevel(map.getZoom());//
  });//

  function dispLevel(level) {
  document.getElementById("zoomlevel").innerHTML = "<img src ='scale" + map.getZoom() + ".PNG'>; " + "<BR>" + "地図データ &#169; " + "想像地図研究所".link("http://www27.atpages.jp/souzoumap/Maps/Maps.HTM");
  }

  // Map tile license
  var copyrightDiv = document.createElement("div");
  copyrightDiv.style.fontSize = "10px";
  copyrightDiv.style.whiteSpace = "nowrap";
  copyrightDiv.style.padding = "0 6px";
  copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)";
  var copyrightSpan = document.createElement("span");
  copyrightSpan.setAttribute("id", "zoomlevel");
  copyrightSpan.setAttribute("style", "color: #444;");
  copyrightSpan.innerHTML = "<img src ='scale" + map.getZoom() + ".PNG'>; " + "<BR>" + "地図データ &#169; " + "想像地図研究所".link("http://souzoumap.webcrow.jp/Maps/Maps.HTM");
  copyrightDiv.appendChild(copyrightSpan);
  map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(copyrightDiv);
});


これを表示した物がこちらになります。
http://souzoumap.webcrow.jp/Smap/gmap3/ 

試したこと

center: new google.maps.LatLng(85.0511287798066,-180) という部分の数値を変えたら変わるかと思ってやってみたのですが、この数字を変えてしまうと真っ白になりました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

  var map = new google.maps.Map(oMapCanvas, {
    zoom: 17, 
    center: new google.maps.LatLng(85.0511287798066,-180), // ←ここの値を変更する
    disableDefaultUI: true,
    panControl: true,
    mapTypeId: customMapType.name
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/18 15:41

    それを伝えたところで、私は何をすればいいの?あ、そうですかとしか答えようがないのですが。

    キャンセル

  • 2018/02/18 16:43

    中途半端な返答で申し訳ありません。
    試してみましたが、APIキーを入れた状態に直しても、(85.0511287798066,-180) という数値を変更すると以前と同じく真っ白になってしまい、問題は解決しませんでした。
    なので他の箇所の変更を試してみようと思います。

    無礼な返答で申し訳ありませんでした。

    キャンセル

  • 2018/02/18 16:45

    無礼とは思いませんが、やりとりが面倒になってしまいます。
    問題点は書いているコードのAPIバージョンが古いので、ゼロから最新情報を元にゼロから書き直した方が良いです。

    キャンセル

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る