CODEWITHSUNDEEP
javascriptgoogle-mapsmarker
A Smith
A Smith

Reputation: 631

Google Maps Javascript API: marker.setPosition Issue

It's probably something obvious... but I cannot see it. The following code works as expected for everything except the marker.setPosition action:

<head>
<title>Test Simulation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key=x&sensor=false">
</script>

<script type="text/javascript">
  var marker = null;
  var myLatlng = null;
  var map = null;
  var image = null;
  var mapOptions = null

  function movemarker()
  {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","http://x.com/x13/?testloc=1",false);
    xmlhttp.send();

    var data = xmlhttp.responseText;
    vals = data.split(',');
    latv = parseFloat(vals[0]);
    lonv = parseFloat(vals[1]);
    myLatlng = new google.maps.LatLng(latv,lonv);

    var fld = document.getElementById('before_map');
    fld.innerText = ' ' + 'lat:' + latv + ', lon: ' + lonv + ' ' + myLatlng.toString();
    marker.setPosition = myLatlng;
  }

  function initialize()
  {
    myLatlng = new google.maps.LatLng(44.809122,-36.650391);
    mapOptions = 
    {
      center: myLatlng,
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

    image = 'http://x.com/x_icon.gif';
    marker = new google.maps.Marker(
    {
      position: myLatlng,
      map: map,
      icon: image,
      title:"Hello World!"
    })

    window.setInterval("movemarker()",5000);
  }
</script>
</head>
<body onload="initialize(); ">
<div id="before_map">Test area...</div>
<div id="map_canvas" style="align:right; width:600; height:500"></div>

The "before_map" test area shows the new latitude and longitude values -- which update every 5 seconds.

I've made adjustments based on answers to similar questions but I'm still stuck.

Upvotes: 4

Views: 55769

Answers (4)

Dyary
Dyary

Reputation: 810

marker.position = { lat: 40.7128, lng: -74.0060 };

Use this in the new advanced marker

Upvotes: 0

Moses Machua
Moses Machua

Reputation: 11532

As of February 21st, 2024 (v3.56), google.maps.Marker is deprecated.

Version 3.56 introduced the AdvancedMarkerElement which does not have marker.setPosition(myLatlng) method. The following is how you use the new advanced marker and how you update it to a new position.

const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: "MyMapId",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: { lat: 37.4239163, lng: -122.0947209 },
    gmpDraggable: true,
    title: "My draggable marker"
});

To update the marker position:

marker.position = { lat: 37.4239278, lng: -122.0943694 }

Note that the new advanced marker requires the map object to have a mapId property, otherwise it won't work.

Upvotes: 0

lccarrasco
lccarrasco

Reputation: 2051

marker.setPosition is a function, not a property, I think you want

marker.setPosition(myLatlng);

Upvotes: 10

abhishek
abhishek

Reputation: 2992

setPosition is a method. You need to modify your code to 

marker.setPosition(myLatlng);

Please check whether it works.

Upvotes: 26

Related Questions