简体   繁体   中英

Show nearby Places in Google Maps in Meteor

I am trying to get nearby places like gym, atm on google maps. For this I have used dburles:google-maps package. I followed the instructions on Google Maps API and did the following. The map is generated, and the center marker is shown but I am not able to generate the places markers. Can anyone point out what I am doing wrong?

This is the JS code.

Template.map.helpers({
    exampleMapOptions: function() {
        // Make sure the maps API has loaded
        if (GoogleMaps.loaded()) {
            // Map initialization options
            var data=Test.findOne().address.geopoint;
            var lat=data[1];
            var lng=data[0];
            console.log([lat,lng]);
            return {
                center: new google.maps.LatLng(lat, lng),
                zoom: 14
            };
        }
    }
});





Template.map.onCreated(function() {
    var self = this;

    GoogleMaps.ready('exampleMap', function(map) {
        var marker;

        // Create and move the marker when latLng changes.
        self.autorun(function() {
            var data=Test.findOne().address.geopoint;
            var lat=data[1];
            var lng=data[0];

            if (! lat && ! lng)
                return;

            // If the marker doesn't yet exist, create it.
            if (! marker) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lng),
                    map: map.instance
                });
            }
            // The marker already exists, so we'll just change its position.
            else {
                marker.setPosition([lat,lng]);
            }

            // Center and zoom the map view onto the current position.
            map.instance.setCenter(marker.getPosition());
            map.instance.setZoom(14);


            var pyrmont = new google.maps.LatLng(lat,lng);

            // map = new google.maps.Map(document.getElementById('exampleMap'), {
            //     center: pyrmont,
            //     zoom: 15
            // });

            var request = {
                location: pyrmont,
                radius: '5000',
                types: ['store']
            };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);


        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    createMarker(results[i]);
                }
            }
        }

        });
    });
});

通过在地点搜索map.instance map替换为map.instance解决了该问题。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM