Gmaps.js \ Создание нового маркера в зависимости от местоположения пользователя

Question

Я использую gmaps.js для API Google Maps. Целью является создание карты с географическим местоположением пользователя и создание нового маркера. Что-то вроде «Привет! Ты здесь!»

Расположение карты и географии прекрасно, но создание нового маркера с текущими координатами пользователя становится для меня проблемой.

Это код:

// public/core.js 
//Creating map 
var map; 
$(document).ready(function(){ 
     map = new GMaps({ 
     el: '#map', 
     lat: 0, 
     lng: 0, 
     zoomControl : true, 
     zoomControlOpt: { 
      style : 'SMALL', 
      position: 'TOP_LEFT' 
     }, 
     panControl : false, 
     streetViewControl : false, 
     mapTypeControl: false, 
     overviewMapControl: false 
     }); 

// Define user location 
     GMaps.geolocate({ 
      success: function(position) { 
      map.setCenter(position.coords.latitude, position.coords.longitude); 
      }, 
      error: function(error) { 
      alert('Geolocation failed: '+error.message); 
      }, 
      not_supported: function() { 
      alert("Your browser does not support geolocation"); 
      } 
     }); 

// Creating marker of user location 
     map.addMarker({ 
      lat: position.coords.latitude, 
      lng: position.coords.longitude, 
      title: 'Lima', 
      click: function(e) { 
      alert('You clicked in this marker'); 
      }, 
      infoWindow: { 
       content: '<p>You are here!</p>' 
      } 
    }); 

}); 

Answer 1

Проблема заключается в том, что ваш призыв к map.addMarkerпредполагает что функция выше, GMaps.geolocate, удалось, когда на самом деле position будет установлен только один раз success функция решает:

// public/core.js 
//Creating map 
var map; 
$(document).ready(function(){ 
     map = new GMaps({ 
     el: '#map', 
     lat: 0, 
     lng: 0, 
     zoomControl : true, 
     zoomControlOpt: { 
      style : 'SMALL', 
      position: 'TOP_LEFT' 
     }, 
     panControl : false, 
     streetViewControl : false, 
     mapTypeControl: false, 
     overviewMapControl: false 
     }); 

// Define user location 
     GMaps.geolocate({ 
      success: function(position) { 
      map.setCenter(position.coords.latitude, position.coords.longitude); 


     // Creating marker of user location 
       map.addMarker({ 
        lat: position.coords.latitude, 
        lng: position.coords.longitude, 
        title: 'Lima', 
        click: function(e) { 
        alert('You clicked in this marker'); 
        }, 
        infoWindow: { 
         content: '<p>You are here!</p>' 
        } 
      }); 
      }, 
      error: function(error) { 
      alert('Geolocation failed: '+error.message); 
      }, 
      not_supported: function() { 
      alert("Your browser does not support geolocation"); 
      } 
     }); 

});