initMap不是一个功能,在Google上找不到解决方案

时间:2017-07-24 08:11:00

标签: javascript api maps

我找到了很多解决方案,但对我的情况没有任何作用。我正在使用外部API而且我对JavaScript一无所知,但我的工作要求我让它工作。

这是我的整个代码。我不知道我做错了什么。地图甚至没有加载。



<!DOCTYPE html>
<html>
<head>
	<title>Retkipaikka</title>

	<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 650px;
        width: 80%;
        margin: 0 auto;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>

	
	<script>
		function loadXMLDoc() {
		  var xhttp = new XMLHttpRequest();
		  xhttp.onreadystatechange = function() {
		    if (this.readyState == 4 && this.status == 200) {
		      document.getElementById("map").innerHTML =
		      this.responseText;
		    }
		  };
		  xhttp.open("GET", "https://kartta.retkipaikka.fi/places.json", true);
		  xhttp.send();
		} 
	</script>
	<div id="map"></div>
    <script type="application/json"> 
     
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: new google.maps.LatLng(61, 25),
          gestureHandling: 'cooperative',
          mapTypeControl: false,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var styles = [ { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ce3940" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#6bb4d9" } ] }, { "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "invert_lightness": false }, { "color": "#fffff6" } ] } ]; map.setOptions({styles: styles});

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'http://kartta.retkipaikka.fi/places.json?north=61.0&south=59.0&west=24.0&east=25.0';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUo_SRhdUkf3OszSSX3CvckaNfwvhc070&callback=initMap">
    </script>
</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案