Геолокация с Google Maps API и текст Google Поиск

Question

Я новичок в преобразовании javascript из VB. Это мой первый снимок при создании динамической карты Google и я стараюсь создать карту google с использованием местоположения пользователей и применить поиск мест для спортивных магазинов. В настоящее время моя карта генерирует и масштабирует мое местоположение, но не применяет результаты поиска с помощью маркеров. вот мой код:

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

 
    <article> 
 
     <p>Finding your location: <span id="status">checking...</span></p> 
 
    </article> 
 
<script> 
 
function success(position) { 
 
    var s = document.querySelector('#status'); 
 
    
 
    if (s.className == 'success') { 
 
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back  
 
    return; 
 
    } 
 
    
 
    s.innerHTML = "found you!"; 
 
    s.className = 'success'; 
 
    
 
    var mapcanvas = document.createElement('div'); 
 
    mapcanvas.id = 'mapcanvas'; 
 
    mapcanvas.style.height = '400px'; 
 
    mapcanvas.style.width = '560px'; 
 
    
 
    document.querySelector('article').appendChild(mapcanvas); 
 

 

 
    
 
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: latlng, 
 
    mapTypeControl: false, 
 
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); 
 
    var service; 
 
    var infowindow; 
 
var request = { 
 
    location: latlng, 
 
    radius: '3200', 
 
    query: 'sports' 
 
    }; 
 

 
    service = new google.maps.places.PlacesService(map); 
 
    service.textSearch(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]); 
 
    } 
 
    } 
 
} 
 
} 
 

 
function error(msg) { 
 
    var s = document.querySelector('#status'); 
 
    s.innerHTML = typeof msg == 'string' ? msg : "failed"; 
 
    s.className = 'fail'; 
 
    
 
    // console.log(arguments); 
 
} 
 

 
if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(success, error); 
 
} else { 
 
    error('not supported'); 
 
} 
 

 
</script>

Я чувствую, что я мог бы быть пропущен некоторыми Var задания или не перезапись текущей карты с «Картой холста». Кто-нибудь создал что-то подобное, которое дает некоторое представление? Любая помощь очень ценится, чтобы выяснить, почему мои результаты поиска не будут отображаться на карте. Благодаря!

Answer 1

Ваш код работает, но вам не хватает функции createMarker. Это не метод API.

Uncaught ReferenceError: createMarker is not defined 

Пример createMarker функция:

function createMarker(place) { 

    new google.maps.Marker({ 
     position: place.geometry.location, 
     map: map 
    }); 
} 

Примечание: если вам нужно только место в этой функции можно также назвать его и изменить его таким образом:

function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
      var place = results[i]; 
      console.log(place); 
      createMarker(results[i].geometry.location); // pass only the location to createMarker 
     } 
    } 
} 

function createMarker(position) { 

    new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 
} 

JSFiddle demo