Google Map Embed с использованием нового API-ключа не работает - PullRequest
Новая
       23

Google Map Embed с использованием нового API-ключа не работает

0 голосов
/ 15 сентября 2018

Я только что получил новый APIKey для использования с сайтом, над которым я работаю со старым кодом.Раньше встроенная карта отображалась нормально (пока она не выдала мне ошибку, чтобы получить новый APIKey), но теперь, когда я заменил APIKey, карта вообще не отображается.Это также не выдает никакой ошибки, поэтому я не уверен, что заставляет карту не показываться.Ниже приведен HTML-код и веб-ссылка: https://colorimetermapper.000webhostapp.com/disease-density-map.html

<!DOCTYPE html>

<html>
    <head>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
          #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
          }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_KCetm6uQU2SO1aCSplOe9dmIug5ycvg&amp;v=3.exp&amp;"></script>

        <script language="javascript">


        var dataarray = new Array();
        var map, pointarray, heatmap;
        var HeatmapData = [];
        var infowindow = new google.maps.InfoWindow({});
        var marker = [];
        var mapType = 0;
        var geocoder;
        var defLat = 40.548112;
        var defLong = -75.605447;



//      var sizeMarker = null;

            var markerOptions = {
            path: google.maps.SymbolPath.CIRCLE,
              strokeColor: '#0A2040',
              strokeOpacity: 0.0,
              strokeWeight: 2,
              fillColor: '#0A2040',
              fillOpacity: 0.5,
              scale: 10
            };  



            function setMaxIntensity()
            {
              var minIntensity = 25;
              var zoomLevel = map.getZoom();
              var IntensityVal = (Math.pow(2, 17-zoomLevel)*minIntensity);
              if (zoomLevel > 17) IntensityVal = minIntensity;
              heatmap.set('maxIntensity', IntensityVal);
            }   

        function show(json) 
        {
    //      alert(sizeMarker);

            var latLng;
            var imgName;

            $.each(json, function(index, value) 
            {

                dataarray.push(value); 

            });


            for (var index=0; index<dataarray.length; index++)
            {
                latLng = new google.maps.LatLng(parseFloat(dataarray[index][1]),parseFloat(dataarray[index][2]));
                imgName = (dataarray[index][0].toString());




                createMarker(parseFloat(dataarray[index][1]), parseFloat(dataarray[index][2]),imgName);

            }





              var mapOptions = {
                        zoom: 13,
                        center: new google.maps.LatLng(defLat,defLong),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                      };

                      map = new google.maps.Map(document.getElementById('map-canvas'),
                          mapOptions);

                      var pointArray = new google.maps.MVCArray(HeatmapData);

                      heatmap = new google.maps.visualization.HeatmapLayer({
                        data: pointArray,

                      });
                      heatmap.set('radius', heatmap.get('radius') ? null : 20);

                      heatmap.setMap(map);
                      changeGradient();

                      google.maps.event.addListener(map, 'zoom_changed', setMaxIntensity);
                      setMaxIntensity();

                      for (var i = 0; i < marker.length; i++) {
                            marker[i].setMap(map);
                        marker[i].setVisible(false);
                            } 


        }


        function codeAddress() {
              var address = document.getElementById('address').value;
              geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);

                } else {
                  alert('Geocode was not successful for the following reason: ' + status);
                }
              });
            }


        function initialize(){
            geocoder = new google.maps.Geocoder();
//          run();

           $.getJSON(
         "getdata.php", // The server URL       
//       "http://rfharvest.net16.net/PHPTest/getdata.php", // The server URL
//       "http://192.168.2.10/PHPTest/getdata.php", // The server URL
            { id: 567 }, // 



            );
        }

        function createMarker(lat, lon, name)
        {


            var imgFileN = "pictures/"+name+".JPG";

//          alert("Lat: "+lat+" Long: "+lon);

        var image = {
                  url: imgFileN,
                  size: new google.maps.Size(86, 102),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(10, 10),
                  scaledSize: new google.maps.Size(20, 20)
                };



        var newmarker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
//          icon: markerOptions
            });


            google.maps.event.addListener(newmarker, 'mouseover', function() {
            infowindow.close();
            infowindow = new google.maps.InfoWindow({content: '<IMG BORDER="0" ALIGN="Left" SRC='+imgFileN+'>'})
                infowindow.open(map, this);
            });

            marker.push(newmarker);



            /*
            var infowindow = new google.maps.InfoWindow({
            content: '<IMG BORDER="0" ALIGN="Left" SRC='+imgFileN+'>',
            maxWidth: 550
       });

google.maps.event.addListener(newmarker, 'mouseover', function() {
infowindow.close();
   infowindow.open(map, this);
});
*/







        }



            function toggleHeatmap() {
              heatmap.setMap(heatmap.getMap() ? null : map);

              for (var i = 0; i < marker.length; i++) {
                    marker[i].setVisible(marker[i].getVisible() ? false : true);
                    }   
            }

            function changeGradient() {
              var gradient = [
                'rgba(0, 255, 255, 0)',
                'rgba(0, 255, 255, 1)',
                'rgba(0, 191, 255, 1)',
                'rgba(0, 127, 255, 1)',
                'rgba(0, 63, 255, 1)',
                'rgba(64, 224, 208, 1)',
                'rgba(0, 255, 127, 1)',
                'rgba(152, 251, 152, 1)',
                'rgba(255, 222, 173, 1)',
                'rgba(255, 255, 0, 1)',
                'rgba(255, 165, 0, 1)',
                'rgba(244, 164, 96, 1)',
                'rgba(250, 128, 114, 1)',
                'rgba(255, 0, 0, 1)'
              ]
              heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
    //        heatmap.set('maxIntensity', 300);
            }

            function changeRadius() {
              heatmap.set('radius', heatmap.get('radius') ? null : 20);

            }


            function changeMapType() {
              if (mapType > 3) mapType = 0;
                          if(mapType == 0)
              {
                map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
              }
                          if(mapType == 1)
              {
                map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
              }
                          if(mapType == 3)
              {
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
              }
                          if(mapType == 2)
              {
                map.setMapTypeId(google.maps.MapTypeId.HYBRID);
              }
              mapType = mapType + 1;
            }

            function changeOpacity() {
              heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
            }

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






            function enterPress(e) 
            {
                if (e.keyCode == 13) 
                {
                    codeAddress();
                    return false;
                }
            }







        function run(size) 
        {
    //      sizeMarker = size;
//          alert(sizeMarker);


           $.getJSON(
         "getdata.php", // The server URL
//       { async: false },
//       "http://rfharvest.net16.net/PHPTest/getdata.php", // The server URL

            { id: 567 }, 
            );
        }

        // We'll run the AJAX query when the page loads.
//      window.onload=run;

        </script>


    </head>
    <body>

        <div id="panel">

        <form action="index.html">
            <input type="submit" value="Go Back">
        </form> 

        <form action="">
              <input id="address" type="textbox"  value="18031" onkeypress="return enterPress(event)">
              <input type="button" value="Address" onclick="codeAddress()">


        </form>


          <button onclick="toggleHeatmap()">Toggle Heatmap</button>
          <button onclick="changeGradient()">Change gradient</button>
          <button onclick="changeRadius()">Change radius</button>
          <button onclick="changeMapType()">Change Map Type</button>
          <button onclick="changeOpacity()">Change opacity</button>



        </div>
        <div id="map-canvas"></div>
    </body>
</html>
...