マップ上にマーカーが表示されない

エラーは出ないのですが、niigata.geojsonを読み込んでマーカーをマップ上に表示させたいのにできません。。。
現在地はすこしずれていますが、表示されます。

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="UTF-8">
6
7<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"
8media="only screen and(max-width:599px)">
9<title>geojson</title>
10
11<link rel="stylesheet" href="style_map.css">
12
13
14    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDA7XoOL7zluNipt_doECxwBWphLZTY2Ac&callback=initMap" type="text/javascript" async defer></script>
15    <!-- D3.jsを読み込む -->
16    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
17
18
19
20<!--********************************************************
21google map
22**************************************************************-->
23
24
25<script>
26
27
28
29
30    function initMap(){
31    //   var markerCluster = new MarkerClusterer(map, markers,
32                //  {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
33    //}
34
35google.maps.event.addDomListener(window, 'load', function() {
36
37        //Google Maps初期化
38      var map = new google.maps.Map(document.getElementById('map-canvas'), {
39            center: {lat:37.953144299100003, lng: 139.14128375000001 },
40            zoom: 12
41       });
42        //GeoJSONデータ読み込み
43        d3.json('niigata.geojson', function(data) {
44            //データレイヤーに追加
45            map.data.addGeoJson(data);
46            //イベント(マーカークリック時)を設定
47            map.data.addListener('click', mouseClick);
48        });
49
50
51
52        function mouseClick(e) {
53            //features->propertiesのaddressデータをクリック時に表示する
54            alert(e.feature.getProperty('address'));
55        }
56});
57    //---------------------------------------------------------------------------------------------------
58
59      // 現在地取得処理
60      //function initMap() {
61        // Geolocation APIに対応している
62        if (navigator.geolocation) {
63
64          // 現在地を取得
65          navigator.geolocation.getCurrentPosition(
66            // 取得成功した場合
67            function(position) {
68              // 緯度・経度を変数に格納
69              var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
70
71              // マップオプションを変数に格納
72              var mapOptions = {
73                zoom : 15,          // 拡大倍率
74                center : mapLatLng  // 緯度・経度
75
76              };
77              // マップオブジェクト作成
78               var map = new google.maps.Map(
79                document.getElementById("map-canvas"), // マップを表示する要素
80                mapOptions         // マップオプション
81              );
82              //　マップにマーカーを表示する
83              var marker = new google.maps.Marker({
84                map : map,             // 対象の地図オブジェクト
85                position : mapLatLng,   // 緯度・経度
86                icon: {
87                    fillColor: "#4169e1",                //塗り潰し色
88                      fillOpacity: 0.8,                    //塗り潰し透過率
89                        path: google.maps.SymbolPath.CIRCLE, //円を指定
90                          scale: 10,                           //円のサイズ
91                            strokeColor: "#4169e1",              //枠の色
92                              strokeWeight: 1.0                    //枠の透過率
93    }
94              });
95            },
96            // 取得失敗した場合
97            function(error) {
98              // エラーメッセージを表示
99              switch(error.code) {
100                case 1: // PERMISSION_DENIED
101                  alert("位置情報の利用が許可されていません");
102                  break;
103                case 2: // POSITION_UNAVAILABLE
104                  alert("現在位置が取得できませんでした");
105                  break;
106                case 3: // TIMEOUT
107                  alert("タイムアウトになりました");
108                  break;
109                default:
110                  alert("その他のエラー(エラーコード:"+error.code+")");
111                  break;
112              }
113            }
114          );
115        // Geolocation APIに対応していない
116        } else {
117          alert("この端末では位置情報が取得できません");
118        }
119      }
120
121    </script>
122
123
124
125  </head>
126  <body>
127    <div id="map-canvas"></div>
128  </body>
129</html>
130

これはniigata.geojsonです

geojson
1{
2"type": "FeatureCollection",
3"name": "niigata",
4"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4612" } },
5"features": [
6{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "あかしあ公園", "P20_003": "新潟県新潟市北区松浜3丁目19番地8", "P20_004": "一時避難場所", "P20_005": 1700, "P20_006": 3401, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.953144299100003, "経度": 139.14128375000001, "NO": "1" }, "geometry": { "type": "Point", "coordinates": [ 139.141283750000014, 37.953144299100003 ] } },
7{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "おやま公園", "P20_003": "新潟県新潟市北区木崎837番地30", "P20_004": "一時避難場所", "P20_005": 2146, "P20_006": 4292, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.934128039100003, "経度": 139.18262866000001, "NO": "2" }, "geometry": { "type": "Point", "coordinates": [ 139.18262866, 37.934128039100003 ] } },
8{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "かやま保育園", "P20_003": "新潟県新潟市北区嘉山1-2-41", "P20_004": "避難所", "P20_005": 276, "P20_006": 553, "P20_007": 1, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 0, "レベル": 1, "備考": null, "緯度": 37.912491, "経度": 139.21868, "NO": "3" }, "geometry": { "type": "Point", "coordinates": [ 139.21868, 37.912491 ] } },
9{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "さくら公園", "P20_003": "新潟県新潟市北区白新町4丁目54番1号", "P20_004": "一時避難場所", "P20_005": 2120, "P20_006": 4240, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.914792539099999, "経度": 139.21185556, "NO": "4" }, "geometry": { "type": "Point", "coordinates": [ 139.21185556, 37.914792539099999 ] } },
10{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "しらかば公園", "P20_003": "新潟県新潟市北区朝日町2丁目14番1号", "P20_004": "一時避難場所", "P20_005": 5037, "P20_006": 10075, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.9198199991, "経度": 139.22597, "NO": "5" }, "geometry": { "type": "Point", "coordinates": [ 139.22597, 37.9198199991 ] } },
11{ "type": "Feature", "properties": { "P20_001": "15101", "P20_002": "すみれ公園", "P20_003": "新潟県新潟市北区石動1丁目10番3号", "P20_004": "一時避難場所", "P20_005": 2109, "P20_006": 4219, "P20_007": 0, "P20_008": 0, "P20_009": 0, "P20_010": 0, "P20_011": 0, "P20_012": 1, "レベル": 1, "備考": null, "緯度": 37.9219144391, "経度": 139.21524719000001, "NO": "6" }, "geometry": { "type": "Point", "coordinates": [ 139.215247190000014, 37.9219144391 ] } }
12]
13}
14

Lhankor_Mhy

2018/11/16 00:34

googleマップが2回作成されているのが気になります。ひとつにまとめてはいかがですか？

benigmaet

2018/11/19 04:55

見づらくてすみません。多分二回目のgoogleマップの記述はコメントになっていると思います

Lhankor_Mhy

2018/11/19 05:05

なっていないと思うのですが……　javascriptのコメント // はその行だけをコメントアウトします。

benigmaet

2018/11/19 06:53

ごめんなさい。先んじて勘違いしてました。回答ありがとうございます

行動規範の内容に同意します

回答1件

ベストアンサー

initMap関数内で、Googleマップのインスタンスを作成した後、

js
1        //Google Maps初期化
2      var map = new google.maps.Map(document.getElementById('map-canvas'), {
3            center: {lat:37.953144299100003, lng: 139.14128375000001 },
4            zoom: 12
5       });

getCurrentPosition関数のコールバック内で上書きしているのが原因だと思います。

js
1              // マップオブジェクト作成
2               var map = new google.maps.Map(
3                document.getElementById("map-canvas"), // マップを表示する要素
4                mapOptions         // マップオプション
5              );