Google maps 为什么谷歌地图API v3无法加载？在这里输入代码_Google Maps

Google maps 为什么谷歌地图API v3无法加载？在这里输入代码

google-maps

Google maps 为什么谷歌地图API v3无法加载？在这里输入代码,google-maps,Google Maps,那是底部的地图画布弄乱了吗 <?php ?> <!DOCTYPE html> <html>enter code here <head> html{高度：100%} 身体{高度：100%；} #地图画布{高度：50%；宽度：50%} var映射； var-marker2；函数初始化（） { var athens=new google.maps.LatLng（37.958592,23.686191）；变量myOptions={ 缩

那是底部的地图画布弄乱了吗

<?php ?>
<!DOCTYPE html>
<html>enter code here
    <head>


html{高度：100%}
身体{高度：100%；}
#地图画布{高度：50%；宽度：50%}


var映射；
var-marker2；
函数初始化（）
{
var athens=new google.maps.LatLng（37.958592,23.686191）；
变量myOptions={
缩放：12，
中心：雅典，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var marker1=新的google.maps.Marker({
职位：雅典，
地图：地图，
标题：“
});

这是自动完成部分。最有可能的错误在这里。 //-------------------------自动完成--------------------------

        <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            var map;
            var marker2;
            function initialize()
            {
                var athens = new google.maps.LatLng(37.958592, 23.686191);
                var myOptions = {
                    zoom: 12,
                    center: athens,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                var marker1 = new google.maps.Marker({
                    position: athens,
                    map: map,
                    title: ""
                });

var input=document.getElementById（'location'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
input.className=''；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
//通知用户未找到该位置并返回。
input.className='notfound'；
返回；
}
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
});
setupClickListener（'changetype-geocode'，['geocode']）；
//自动完成结果：
google.maps.event.addDomListener（窗口“加载”，初始化）；
//---------------------------------------------------------------

这些功能用于放置标记、添加新标记和删除以前的标记

             var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      input.className = '';
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
      }
      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }
      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    });
    setupClickListener('changetype-geocode', ['geocode']);
    // autocomplete results:
  google.maps.event.addDomListener(window, 'load', initialize);
//---------------------------------------------------------------

功能标记（位置）
{
var newpos=newgoogle.maps.LatLng（位置）；
marker2=新的google.maps.Marker({
职位：newpos，
地图：地图，
标题：“
});
}
函数addMarker（）
{
var Location=document.getElementById（“lacation”）.value；
var title=document.getElementById（“标记”）.value；
var newpos=newgoogle.maps.LatLng（位置）；
marker2=新的google.maps.Marker({
职位：newpos，
地图：地图，
标题：标题
});
}
函数removeMarker（）
{
marker2.setMap（空）；
}

这是尸体

            function putMarker(Location)
            {
                var newpos = new google.maps.LatLng(Location);
                marker2 = new google.maps.Marker({
                    position: newpos,
                    map: map,
                    title: ""
                });
            }

            function addMarker()

            {
               var Location = document.getElementById("lacation").value;
                var title= document.getElementById("mark").value;

                var newpos = new google.maps.LatLng(Location);

                marker2 = new google.maps.Marker({
                    position: newpos,
                    map: map,
                    title: title
                });


            }

            function removeMarker()
            {
                marker2.setMap(null);
            }

        </script>
    </head>


地点：


标题：


问题是什么





**

地图加载失败（这是主要问题，但“自动完成”也失败了）。也许更有经验的人可以看到我的错误，但我看不到

以下是整个脚本：
    <body onload="initialize()">
        <div id="map_canvas" style="float: left; margin-right: 40px;border: 1px solid black;"></div>
        <div id="Panel"   style="border: 1px solid black;" >
            <table>
                <tr>
                    <td>Location:</td> 
              <td><input type="text" id="location" name="Location search"/></td>
                <tr><br>
                <td> Title:</td> 
                    <td><input type="text" id="mark" name="Title of Marker"/></td>
                </tr><br>
                    <td>What the problem is?:</td> 
                    <td><textarea rows="3" cols="50" name="explaination"></textarea></td>
                </tr><br>
                <td><input type="button" value="Add" id="buttonadd" onclick="addMarker()"/></td>
                <td><input type="button" value="Remove" id="buttonremove" onclick="removeMarker()"/></td>
            </table>
        </div><br><br>
    </body>
</html>**

var映射；
var-marker2；
函数初始化（）
{
var athens=new google.maps.LatLng（37.958592,23.686191）；
变量myOptions={
缩放：12，
中心：雅典，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var marker1=新的google.maps.Marker({
职位：雅典，
地图：地图，
标题：“
});
//-------------------------自动完成--------------------------
var input=document.getElementById（'location'）；
var autocomplete=new google.maps.places.autocomplete（输入，myOptions）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
input.className=''；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
//通知用户未找到该位置并返回。
input.className='notfound'；
返回；
}
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
});
//自动完成结果：
google.maps.event.addDomListener（窗口“加载”，初始化）；
//---------------------------------------------------------------
功能标记（位置）
{
var newpos=newgoogle.maps.LatLng（位置）；
marker2=新的google.maps.Marker({
职位：newpos，
地图：地图，
标题：“
});
}
    <body onload="initialize()">
        <div id="map_canvas" style="float: left; margin-right: 40px;border: 1px solid black;"></div>
        <div id="Panel"   style="border: 1px solid black;" >
            <table>
                <tr>
                    <td>Location:</td> 
              <td><input type="text" id="location" name="Location search"/></td>
                <tr><br>
                <td> Title:</td> 
                    <td><input type="text" id="mark" name="Title of Marker"/></td>
                </tr><br>
                    <td>What the problem is?:</td> 
                    <td><textarea rows="3" cols="50" name="explaination"></textarea></td>
                </tr><br>
                <td><input type="button" value="Add" id="buttonadd" onclick="addMarker()"/></td>
                <td><input type="button" value="Remove" id="buttonremove" onclick="removeMarker()"/></td>
            </table>
        </div><br><br>
    </body>
</html>**

here is the whole script:

 <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            var map;
            var marker2;


            function initialize()
            {
                var athens = new google.maps.LatLng(37.958592, 23.686191);

                var myOptions = {
                    zoom: 12,
                    center: athens,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

                var marker1 = new google.maps.Marker({
                    position: athens,
                    map: map,
                    title: ""
                });

//-------------------------Autocomplete--------------------------

             var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input, myOptions );

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      input.className = '';
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
      }

      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);

    });

    // autocomplete results:
  google.maps.event.addDomListener(window, 'load', initialize);
//---------------------------------------------------------------


            function putMarker(Location)
            {
                var newpos = new google.maps.LatLng(Location);
                marker2 = new google.maps.Marker({
                    position: newpos,
                    map: map,
                    title: ""
                });
            }

            function addMarker()

            {
               var Location = document.getElementById("lacation").value;
                var title= document.getElementById("mark").value;

                var newpos = new google.maps.LatLng(Location);

                marker2 = new google.maps.Marker({
                    position: newpos,
                    map: map,
                    title: title
                });


            }

            function removeMarker()
            {
                marker2.setMap(null);

            }




        </script>

The main error was just a miss-type in google lilbrary. and as Dr.Molle noticed a missed bracket in the initialize();
anyway i've fixed this and i've added an array that counts and naming the markers  



  <!----------------------------------Google Scripts Library--------------------->

            <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

            <!---------------------------------END of Google Scripts Library--------------------->
            <script type="text/javascript">
                var map;
                var marker2;
                var Location;
                var myOptions;
                var marker1;
                var input;

                 var posa=-1; 
                var markers=new Array();
                function initialize()
                {
                    var athens = new google.maps.LatLng(37.958592, 23.686191);

                     myOptions = {
                        zoom: 12,
                        center: athens,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);

                        marker1 = new google.maps.Marker({
                        position: athens,
                        map: map,
                        title: ""
                    });

                    //-------------------------Autocomplete--------------------------


               var input = document.getElementById('search');
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();




          google.maps.event.addListener(autocomplete, 'place_changed', function() {

              posa++;
                var place = autocomplete.getPlace();  
                markers.push( new google.maps.Marker({
            map: map,
            title: 'a name (probably the user's name.)'+place.name
          })); 

            alert (posa); 
            infowindow.close();

            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            }
        //alert(autocomplete.getBounds());

            markers[posa].setPosition(place.geometry.location);

            var address = '';
            if (place.address_components) {
              address = [
                (place.address_components[0] &&
                 place.address_components[0].short_name || ''),
                (place.address_components[1] &&
                 place.address_components[1].short_name || ''),
                (place.address_components[2] &&
                 place.address_components[2].short_name || '')].join(' ');
            }

            infowindow.setContent('<div><b>' + place.name + '</b><br>' + address);
            infowindow.open(map, markers[posa] );
          });






       //--------------------------------END of Autocomplete--------------------------------
                    google.maps.event.addDomListener(window, 'load', initialize);

                }   //<------------- need to be the last bracket?
                    // END of initialize Function

                function putMarker(Location)
                {
                    var newpos = new google.maps.LatLng(Location);
                    marker2 = new google.maps.Marker({
                        position: newpos,
                        map: map,
                        title: "",
                        draggable:true
                    });
                }

                function addMarker()

                {
                    Location = document.getElementById("search").value;
                    var title= document.getElementById("mymark").value;

                    var newpos = new google.maps.LatLng(Location);

                    marker2 = new google.maps.Marker({
                        position: newpos,
                        map: map,
                        title: title
                    });


                }

                function removeMarker()
                {
                    marker2.setMap(null);

                }

    function listmarkers()
    {
       var x=""
       alert(posa)
       for ( i=0;i<=posa;i++)
       x=x+markers[i].title+"<br>"
            document.getElementById("markerlist").innerHTML=x
    }


            </script>

<body onload="initialize();">



    <div id="map_canvas" style="float: left; margin-right: 40px;border: 1px solid black;"></div>

    <div id="Panel"   style="border: 1px solid black;" >

        <table>
            <tr>
                <td>Location:</td> 
                <td><input id="search" type="text" size="50" placeholder="Enter a location" autocomplete="on"></td>
            <tr><br>
            <td> Title:</td> 
            <td><input type="text" id="mymark" name="Title of Marker" placeholder="Give a title"/></td>
            </tr><br>
            <td>Comments:</td> 
            <td><textarea rows="3" cols="50" name="explaination" placeholder="Briefly explain what the problem is"></textarea></td>
            </tr><br>
            <td><input type="button" value="Add" id="buttonadd" onclick="addMarker();"/></td>
            <td><input type="button" value="Remove" id="buttonremove" onclick="removeMarker();"/></td>