0

付近の検索の結果にマーカーが表示されません。誰でも助けることができますか？JavaScriptとGoogle APIを使用した非常に初心者です。私は基本的にその地域のすべてのマクドナルドを見つけようとしています. 表示される唯一のマーカーは、ユーザーの現在の場所です。前もって感謝します！:D

<!DOCTYPE HTML>
<html>

    <head>
        <title>Basic GeoLocation Map</title>
        <!-- Google Maps and Places API -->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function initGeolocation() {
                if (navigator.geolocation) {

                    // Call getCurrentPosition with success and failure callbacks
                    navigator.geolocation.getCurrentPosition(success, fail);
                } else {
                    alert("Sorry, your browser does not support geolocation services.");
                }
            }
            var map;
            var service;

            function handleSearchResults(results, status) {
                console.log(results);

                for (var i = 0; i < results, length; i++) {
                    var marker = new google.maps.Marker({
                        position: results(i).geometry.location,
                        map: map
                    });
                }

            }

            function performSearch() {
                var request = {
                    bounds: map.getBounds(),
                    name: "McDonald's"
                }

                service.nearbySearch(request, handleSearchResults);
            }

            function success(position) {
                // Define the coordinates as a Google Maps LatLng Object
                var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                // Prepare the map options
                var mapOptions = {
                    zoom: 14,
                    center: coords,
                    mapTypeControl: false,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create the map, and place it in the map_canvas div
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


                // Place the initial marker
                var marker = new google.maps.Marker({
                    position: coords,
                    map: map,
                    title: "Your current location!"
                });
                marker.setMap(map);

                service = new google.maps.places.PlacesService(map);

                google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
            }

            function fail() {
                // Could not obtain location
            }

             //Request places from Google

            function placesRequest(title, latlng, radius, types, icon) {
                //Parameters for our places request
                var request = {
                    location: latlng,
                    radius: radius,
                    types: types
                };
                //Make the service call to google
                var callPlaces = new google.maps.places.PlacesService(map);
                callPlaces.search(request, function (results, status) {
                    //trace what Google gives us back
                    $.each(results, function (i, place) {
                        var placeLoc = place.geometry.location;
                        var thisplace = new google.maps.Marker({
                            map: map,
                            position: place.geometry.location,
                            icon: icon,
                            title: place.name
                        });
                    })
                });

            }
        </script>
    </head>

    <body onload="initGeolocation();">
        <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
             <h1>Google Places API</h1>

            <p>We're using both google places (to search for things in a certain category) AND google maps (to put the things on a map)~! PLUS we're using geolocatoin to automatically centre the map on the user's current location!</p>
        </div>
        <!-- map div container -->
        <div id="map_canvas" style="height:500px; margin-left:400px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;"></div>
    </body>

</html>
4

1 に答える 1