How to move marker on the google map (google-maps-react)How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to move an element into another element?How to check whether a string contains a substring in JavaScript?Why does Google prepend while(1); to their JSON responses?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
Why don't I get the correct limit of a sequence, regardless of how I arrange it (the sequence), while following the rules for solving limits?
Are there any space probes or landers which regained communication after being lost?
Why did they ever make smaller than full-frame sensors?
Renewed US passport, did not receive expired US passport
Do all humans have an identical nucleotide sequence for certain proteins, e.g haemoglobin?
Gas pipes - why does gas burn "outwards?"
How can I maximize the impact of my charitable donations?
Relevance of the Resurrection
Might have gotten a coworker sick, should I address this?
Contract Employer Keeps Asking for Small Things Without Pay
Will replacing a fake visa with a different fake visa cause me problems when applying for a legal study permit?
What would be the seasonal impact on the indoor climate of a giant dome habitation?
Kingdom Map and Travel Pace
Job offer without any details but asking me to withdraw other applications - is it normal?
A medieval fantasy adventurer lights a torch in a 100% pure oxygen room. What happens?
Writing a worded mathematical expression
How to read torque specs off this Nissan service diagram?
Converting multiple assignment statements to single comma separated assignment
Were Roman public roads build by private companies?
Using the pipe operator ("|") when executing system commands
Can a new chain significantly improve the riding experience? If yes - what else can?
Are scroll bars dead in 2019?
Why should I always enable compiler warnings?
My employer wants me to do a work of 6 months in just 2 months
How to move marker on the google map (google-maps-react)
How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to move an element into another element?How to check whether a string contains a substring in JavaScript?Why does Google prepend while(1); to their JSON responses?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.
This is my code`
class Maps extends React.Component {
constructor(props)
super(props);
this.state =
dronePosition: []
;
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
// If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
// setInterval(function()
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
//Here I'm always getting updated positions for markers from backend.
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
// , 2000)
getAllDrones()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones2();
)
getAllDrones2()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
render()
var _this = this;
const google = this.props;
const icon =
url: `data:image/jpeg;base64,$binary_data`,
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
;
return (
<div>
<Header />
<Map className="map" google=google initialCenter=userLocation zoom=15 onClick=this.onMapClicked >
_this.state.dronePosition.map(marker => (
<Marker
onClick=_this.MarkerClick.bind(_this, marker.id)
icon=marker.photo
position= lat: marker.latitude, lng: marker.longitude
key=marker.id
/>
))
</Map>
</div>
)
javascript reactjs google-maps
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
add a comment |
0
I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.
This is my code`
class Maps extends React.Component {
constructor(props)
super(props);
this.state =
dronePosition: []
;
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
// If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
// setInterval(function()
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
//Here I'm always getting updated positions for markers from backend.
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
// , 2000)
getAllDrones()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones2();
)
getAllDrones2()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
render()
var _this = this;
const google = this.props;
const icon =
url: `data:image/jpeg;base64,$binary_data`,
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
;
return (
<div>
<Header />
<Map className="map" google=google initialCenter=userLocation zoom=15 onClick=this.onMapClicked >
_this.state.dronePosition.map(marker => (
<Marker
onClick=_this.MarkerClick.bind(_this, marker.id)
icon=marker.photo
position= lat: marker.latitude, lng: marker.longitude
key=marker.id
/>
))
</Map>
</div>
)
javascript reactjs google-maps
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
add a comment |
0
0
0
I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.
This is my code`
class Maps extends React.Component {
constructor(props)
super(props);
this.state =
dronePosition: []
;
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
// If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
// setInterval(function()
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
//Here I'm always getting updated positions for markers from backend.
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
// , 2000)
getAllDrones()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones2();
)
getAllDrones2()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
render()
var _this = this;
const google = this.props;
const icon =
url: `data:image/jpeg;base64,$binary_data`,
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
;
return (
<div>
<Header />
<Map className="map" google=google initialCenter=userLocation zoom=15 onClick=this.onMapClicked >
_this.state.dronePosition.map(marker => (
<Marker
onClick=_this.MarkerClick.bind(_this, marker.id)
icon=marker.photo
position= lat: marker.latitude, lng: marker.longitude
key=marker.id
/>
))
</Map>
</div>
)
javascript reactjs google-maps
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
I want to move multiple markers on the google map when I get the latitude and longitude from MongoDB. I'm always getting updated latitude and longitude from db, but my markers are not moving, and after refreshing the page, the markers positions are changing, but I need to do it without refreshing the page.
This is my code`
class Maps extends React.Component {
constructor(props)
super(props);
this.state =
dronePosition: []
;
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
// If I'm using setInterval, the markers are not showing at all. That's why here I call the getAllDrones() function
// setInterval(function()
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
//Here I'm always getting updated positions for markers from backend.
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
// , 2000)
getAllDrones()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones2();
)
getAllDrones2()
var _this = this;
const config =
headers:
"Authorization" : `Bearer $localStorage.getItem('token')`,
;
axios.get(packages.proxy+'drones/getAllDrones',config)
.then(res =>
_this.state.dronePosition = [];
res.data.forEach( function(element)
if(element.userId == localStorage.getItem("user_id"))
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/red-dot.png")
else
_this.state.dronePosition.push(id: element._id, latitude: element.latitude, longitude: element.longitude, photo: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
);
_this.getAllDrones();
)
render()
var _this = this;
const google = this.props;
const icon =
url: `data:image/jpeg;base64,$binary_data`,
scaledSize: new google.maps.Size(40, 40),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
;
return (
<div>
<Header />
<Map className="map" google=google initialCenter=userLocation zoom=15 onClick=this.onMapClicked >
_this.state.dronePosition.map(marker => (
<Marker
onClick=_this.MarkerClick.bind(_this, marker.id)
icon=marker.photo
position= lat: marker.latitude, lng: marker.longitude
key=marker.id
/>
))
</Map>
</div>
)
javascript reactjs google-maps
javascript reactjs google-maps
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
edited Mar 28 at 11:18
Alvard Hovhannisyan
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
asked Mar 28 at 8:55
Alvard HovhannisyanAlvard Hovhannisyan
15 bronze badges
15 bronze badges
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393501%2fhow-to-move-marker-on-the-google-map-google-maps-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393501%2fhow-to-move-marker-on-the-google-map-google-maps-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
