キャッチされないのReferenceErrorは：Googleが

私はマップ上ににGeoJSONファイルからマーカーにロードするようにしようとして定義されていない、マップのロード罰金が、エラーを得続ける...この行でキャッチされないのReferenceErrorは：Googleが

Uncaught ReferenceError: google is not defined

...

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

私はこの上a few他の質問を読んで、それのほとんどは、あなたのマップコードの前にGoogleマップのスクリプトを含める必要がどのように対処します。私はそれを私の頭の中に入れて、私のマップコンテナの上に含めようとしましたが、運はありません。マップ自体は実際にロードされますが、JSONファイルのマーカーはロードされません。

HTML/JSコード

<!DOCTYPE html> 
<html> 
<head> 
    <title>Game Industry Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link rel=StyleSheet href="css/style.css" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div class="navbar navbar-defualt navbar-fixed-top"> 
    <a class="navbar-brand" href="#">Game Industry Map</a> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value=""> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button> 
     </div> 
    </div> 
</div> 
<div class='content-container'> 
    <div id="map"></div> 
    <div id="company-info"> 
     <!--To do...--> 
    </div> 
</div> 
<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap" 
     type="text/javascript"></script> 
</body> 
<footer>Created by <a href="#">My Name</a>.</footer> 
</html>

にGeoJSONスクリプトライブラリを呼び出す前に、Googleのライブラリを含めるようにしてください

{ "type": "FeatureCollection", 
    "features": [ 
    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]}, 
     "properties": { 
     "company-logo": "images/activision.png", 
     "company-name": "Activision Publishing Inc", 
     } 
    }, 

    { "type": "Feature", 
     "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]}, 
     "properties": { 
     "company-logo": "images/naughtydog.png", 
     "company-name": "Naughty Dog Inc", 
     } 
    } 
    ] 
}

出典

2016-03-28 Carson

[（検索オプションは機能しません）]重複しないReferenceError：googleが定義されていません]（http://stackoverflow.com/questions/35909352/search-option-not-working-uncaught-referenceerror-google-is- – geocodezip

ファイル：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap" 
    type="text/javascript"></script> 

<script type="text/javascript"> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 34.029602, lng: -118.452416}, 
      zoom: 13 
     }); 
     map.data.loadGeoJson('data.json'); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

編集

あなたはここにコールバックを定義している

：Googleマップは、そのすべてのコンポーネントをロードした後/maps/api/js?key=API_KEY_HERE&callback=initMap

は、これはあなたのinitMap()メソッドを呼び出します。

しかし、googleがまだ読み込まれていない場合は、この機能の外でgoogle.maps.event.addDomListener(window, 'load', initialize);を呼び出すことになります。

addDomListenerコールをinitMap()コールに含めるようにしてください。あなたはコールバックでそれを書く必要があるので、

出典

2016-03-28 17:14:00 cl3m

Googleのapiドキュメントでは、スクリプトタグが下に表示されています。https://developers.google.com/maps/documentation/javascript/examples/map-simple – JordanHendrix

私はそれをすでに試しましたが、残念ながら、仕事。地図自体はどちらの方法で読み込まれますが、ライブラリをどこに含めてもマーカーは表示されません。 – Carson

okあなたはコールバックとしてinitMap（）をコールしていて、 'google.maps.event.addDomListener（window、 'load'、initialize）;はinitMap（）関数内にないので、Googleはまだいませんあなたがそれを呼び出すときに定義される – cl3m

あなたは、あなたがgoogle.maps.events.addDomListner()

addListenerを使用してDOMにリスナーを追加する必要があり、あなたがgoogle.maps.event.addListerner()を使用してリスナーを追加する必要がまず第一に、接近しているが、非同期です。

<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

function initialize() 
{ 
var mapProp = { 
    center: myCenter, 
    zoom:5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker = new google.maps.Marker({ 
    position: myCenter, 
    title:'Click to zoom' 
    }); 

marker.setMap(map); 

// Zoom to 9 when clicking on marker 
google.maps.event.addListener(marker,'click',function() { 
    map.setZoom(9); 
    map.setCenter(marker.getPosition()); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

出典

2016-03-28 17:28:39 JordanHendrix

は、実際には、あなただけ書くことができます。

次に例を示します。

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

（コールバックなし）。 API_KEYも必要ありません。公開されているMaps JavaScript APIアプリでは、プロダクションシステムで使用されているすべてのキー、特に一般公開のキーにリファラー制限を追加し、ドメイン、ホスト、またはアプリケーションの完全なファイルURLだけを許可することを強くおすすめします。

出典

2018-01-24 05:20:59 loveJS

キャッチされないのReferenceErrorは：Googleが

答えて

関連する問題