Метеор, реализующий Карты Google и Google Места

Я пытаюсь внедрить карту Google в своем приложении Meteor, которая получит местоположение пользователя, а затем найдет места, которые служат продукцией питания рядом с пользователем. Я начал с внедрения example Метеор, реализующий Карты Google и Google Места

, предоставленный Google, и он отлично работал, когда я сделал это таким образом; однако я пытаюсь реализовать его правильно, добавив его в фактический файл Javascript, и теперь он дает мне ошибку «Google не определена».

menuList = new Mongo.Collection('items'); 
 
if (Meteor.isClient) { 
 

 
    var pls; 
 
    var map; 
 
    var infowindow; 
 
    Meteor.startup(function() { 
 
     //get user location and return location in console 
 
     var options = { 
 
      enableHighAccuracy: true, 
 
      timeout: 5000, 
 
      maximumAge: 0 
 
     }; 
 

 
     function success(pos) { 
 
      var crd = pos.coords; 
 

 
      console.log('Your current position is:'); 
 
      console.log('Latitude : ' + crd.latitude); 
 
      console.log('Longitude: ' + crd.longitude); 
 
      console.log('More or less ' + crd.accuracy + ' meters.'); 
 
      pls = {lat: crd.latitude, lng: crd.longitude}; 
 
     }; 
 

 
     function error(err) { 
 
      console.warn('ERROR(' + err.code + '): ' + err.message); 
 
     }; 
 

 
     navigator.geolocation.getCurrentPosition(success, error, options); 
 
    }) 
 

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

 
     createMarker: function (place) { 
 
      var placeLoc = place.geometry.location; 
 
      var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: place.geometry.location 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', function() { 
 
       infowindow.setContent(place.name); 
 
       infowindow.open(map, this); 
 
      }); 
 
     } 
 

 

 
    }) 
 

 
    Template.searchIt.helpers({ 
 
     'initMap': function() { 
 
      console.log("HERE"); 
 
      //Dummy values I placed for StackOverflow 
 
      var pyrmont = {lat: -33.234, lng: 95.343}; 
 

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

 
      infowindow = new google.maps.InfoWindow(); 
 
      var service = new google.maps.places.PlacesService(map); 
 
      service.nearbySearch({ 
 
       location: pyrmont, 
 
       radius: 500, 
 
       types: ['food'] 
 
      }, callback); 
 
     } 
 

 

 
    }) 
 
}

<head> 
 
    <title>Place searches</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACgaDFJrh2pMm-bSta1S40wpKDDSpXO2M \t 
 
&signed_in=true&libraries=places" async defer></script> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    
 
    </head> 
 
    <body> 
 
     {{>searchIt}} 
 
    
 
    </body> 
 

 

 
<template name="searchIt"> 
 
{{initMap}} 
 
</template>

источник

2016-02-06 E.Sen

Вы должны попробовать dburles: Google, карты пакет.

Вот пример написан автором: http://meteorcapture.com/how-to-create-a-reactive-google-map/

Удачи!

источник

2016-02-06 21:22:45

Фактически я уже установил этот пакет! Я следовал этому учебнику, и он отлично работал для геолокации, однако я не мог заставить его возвращаться в близлежащие места пищи. –

Мне пришлось поместить код, который у вас выше внутри блока GoogleMaps.ready('map', callback). или внутри блока if (GoogleMaps.loaded()) {} ...

например .. это работает просто отлично: Предостережение: я использую радарный поиск, но концепция такая же.

Template.galleryCard.onRendered(function() { 
    GoogleMaps.ready('minimap', function(map) { 
     const params = { 
     map: map, 
     name: 'The Spice Suite', 
     loc: {lat: 38.9738619, lng: -77.01829699999999}, 
     }; 
     const service = new google.maps.places.PlacesService(params.map.instance); 
     let request2 = { 
      //name & location & radius (meters). 
      name: params.name, 
      location: params.loc, 
      radius: 100, 
     }; 

     let callback = function(results,status) { 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       console.log(results[0]);  
       return results[0].place_id; 
      } else { 
       console.log(status); 
      } 
     }; 
     service.radarSearch(request2,callback); 
    }); 
});

источник

2017-04-09 16:22:04

Метеор, реализующий Карты Google и Google Места

ответ

Смежные вопросы