Маркеры в API Карт Google не отображаются с Geolocation

Question

Я пытаюсь создать на карте места, основанные на геолокации пользователей. Я знаю, что геолокационные работы и карта появляются, но ни один из маркеров не показывает местный бизнес. У меня также нет ошибок в консоли. Я убедился, что сценарий в моем HTML проходит как библиотеку и ключ API, но только в том случае, вот скрипт:

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

Вот мой JavaScript ...

var map; 
var infowindow; 
var service; 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 13, 
     mapTypeControl: false, 
     panControl: true, 
     panControlOptions: { 
      position: google.maps.ControlPosition.TOP_RIGHT 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      position: google.maps.ControlPosition.RIGHT_CENTER 
     }, 
     scaleControl: true, 
     streetViewControl: false 
    }); 

    // Start Geolocation 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

      var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
       content: 'Found You!' 
      }); 

      var request = { 
       location: pos, 
       radius: 500, 
       types: ['store'] 
      }; 

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

      map.setCenter(pos); 

     }, function() { 
      handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
} 

// Callback for Places 
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]); 
     } 
    } 
} 

// Create Marker for Places 
function createMarker(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); 
    }); 
} 

// Google Maps Error Flags 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

Answer 1

Вот моя обновленная кодировка, что я должен работать. Я сделал некоторые настройки для маркеров, но теперь это работает. Как упоминалось в комментариях, я считаю, что проблема связана с переменными, заданными для infowindow. Вместо этого я изменил геолокацию на «infowindowLocation» и отрегулировал в разделе флаги ошибок.

var map; 
var infowindow; 
var service; 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 13, 
     mapTypeControl: false, 
     panControl: true, 
     panControlOptions: { 
      position: google.maps.ControlPosition.TOP_RIGHT 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      position: google.maps.ControlPosition.RIGHT_CENTER 
     }, 
     scaleControl: true, 
     streetViewControl: false 
    }); 

    // Start Geolocation 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

      var infowindowLocation = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
       content: 'Found You!' 
      }); 

      var request = { 
       location: pos, 
       radius: 3218.69, 
       types: ['dentist'] 
      }; 

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

      map.setCenter(pos); 

     }, function() { 
      handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
} 

// Callback for Places 
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]); 
     } 
    } 
} 

// Create Marker for Places 
function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var image = 'img/flag.png'; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     title: place.name, 
     animation: google.maps.Animation.DROP, 
     icon: image 
    }); 

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

// Google Maps Error Flags 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindowLocation = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

initialize();