Question

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

是否将底部的Map_canvas弄乱了？

        <style type="text/css">
            html { height: 100% }
            body { height: 100%;    }
            #map_canvas { height: 50% ; width:50%}
        </style>

        <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: ""
                });

这是Autocomple部分。这很可能是错误。 // -------------------------自动完成---------------------- ----

             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);
//---------------------------------------------------------------

这些功能用于标记放置，添加新标记和删除先前标记

            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>**

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

Answer 1

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>

Answer 2

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>

为什么Google map API v3无法加载？

2 个答案: