Google Javascript Apiマーカーが表示されない

Question

現在の位置とともにマーカーを表示したい。以下のコード場所では、デフォルトの場所から現在の場所に変更されますが、マーカーは表示されません。ストアは正しく検索されます。自分の現在地とともにマーカーを表示したい。

function initMap() { 

    //Set default location of google maps for demonstration purposes 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center : {lat: 18.533333, lng: 73.866667}, 
     zoom: 10 
    }); 

    //create global variables/objects 
    var pos = {}; 
    var strLoc = {}; 
    var infoWindow = new google.maps.InfoWindow({map: map}); 
    var request = {}; 

    if(navigator.geolocation) 
    { 
     navigator.geolocation.getCurrentPosition(function(position){ 

      //Get current location to set the center of the google maps 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude 
      }; 

      //get your current location for finding places around you. 
      //This should be a latlng object of google maps api. 
      strLoc = new google.maps.LatLng(pos); 


      //create a google maps request object 
      request = { 
       location: strLoc, 
       radius: 500, 
       types:['store'] 
      } 


      //set current location on google maps based on HTML geolocation 
      infoWindow.setPosition(pos); 
      infoWindow.setContent('You are Here'); 
      map.setCenter(pos); 


      alert(request) 
      var placeservice = new google.maps.places.PlacesService(map) 
      placeservice.nearbySearch(request,callback) 

     }); 


    } 

} 

function callback(places, status) 
{ 

    if(status === google.maps.places.PlacesServiceStatus.OK) 
    { 

     for(var i = 0; i<places.length; i++) 
     { 
      alert(places[i].name) 
      createMarkers(places[i]); 
     } 
    } 
} 

function createMarkers(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); 
    }) 
} 

Answer 1

私は今、1つのjavascriptのエラーを取得：あなたのコードmapのその時点でのid =「マップ」と<div>への参照、ないgoogle.maps.Mapあるので

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

：この行のInvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanoramaをこのオブジェクトは、initMap関数のローカルです。問題を解決する1つの方法は、グローバル化することです。

var map; // global variable, outside of any function declarations 
function initMap() { 
    //default location 
    // initialize global map variable. 
    map = new google.maps.Map(document.getElementById('map'), { 
    center : {lat: -25.363, lng: 131.044}, 
    zoom: 10 
    }); 
// ... 

proof of concept fiddle

コードスニペット：

var map; 
 

 
function initMap() { 
 
    //Set default location of google maps for demonstration purposes 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 18.533333, 
 
     lng: 73.866667 
 
    }, 
 
    zoom: 10 
 
    }); 
 

 
    //create global variables/objects 
 
    var pos = {}; 
 
    var strLoc = {}; 
 
    var infoWindow = new google.maps.InfoWindow({ 
 
    map: map 
 
    }); 
 
    var request = {}; 
 

 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 

 
     //Get current location to set the center of the google maps 
 
     var pos = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude 
 
     }; 
 

 
     //get your current location for finding places around you. 
 
     //This should be a latlng object of google maps api. 
 
     strLoc = new google.maps.LatLng(pos); 
 

 

 
     //create a google maps request object 
 
     request = { 
 
     location: strLoc, 
 
     radius: 500, 
 
     types: ['store'] 
 
     } 
 

 

 
     //set current location on google maps based on HTML geolocation 
 
     infoWindow.setPosition(pos); 
 
     infoWindow.setContent('You are Here'); 
 
     map.setCenter(pos); 
 

 

 
     alert(request) 
 
     var placeservice = new google.maps.places.PlacesService(map) 
 
     placeservice.nearbySearch(request, callback) 
 

 
    }); 
 

 

 
    } 
 

 
} 
 

 
function callback(places, status) { 
 

 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 

 
    for (var i = 0; i < places.length; i++) { 
 
     alert(places[i].name) 
 
     createMarkers(places[i]); 
 
    } 
 
    } 
 
} 
 

 
function createMarkers(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.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map"></div>