Google maps moving marker on click

Question

What I want to do is,

on my map, when I click somewhere on the map, it shows a marker on the point, then I click different point on the map then it shows a another marker. But I want it to move the first marker to the second point.

( I put " behind the html tags for putting the code here.)

This is my code:

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });

        function placeMarker(location) {

            var marker = new google.maps.Marker({
                position: location,
                map: map
                animation: google.maps.Animation.DROP,

            });
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

Can you copy and paste your page into jsFiddle (http://jsfiddle.net/) I can't read it properly, but is the scope of your "var map" variable global? — Jason, Dec 21 '10 at 22:44

score 21 · Answer 1 · edited Jul 04 '13 at 15:19

21

Every time placemarker() is ran, it creates a new marker.

You need to create the marker once outside of the placemarker function and after that, inside placemarker, use marker.setPosition().

edited Jul 04 '13 at 15:19

Sled

18,541
27
119
168

answered Dec 22 '10 at 01:35

dsas

1,650
18
30

It would be helpful to give an example. I found this help documentation while searching for examples of code that did just this. This answer provides me something I already knew, but doesn't tell me how to implement it or where to find examples showing how to implement it. – cazort Jul 02 '18 at 19:01

score 10 · Answer 2 · edited Aug 08 '16 at 12:40

Another solution is to move a marker, for that you just user marker.setPosition(). (thanks kjy112 for the warning :)

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
    var marker;

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });

        function placeMarker(location) {



            if (marker == undefined){
                marker = new google.maps.Marker({
                    position: location,
                    map: map, 
                    animation: google.maps.Animation.DROP,
                });
            }
            else{
                marker.setPosition(location);
            }
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

what? you can post two answers to one question? i did not know that lol — KJYe.Name, Mar 14 '11 at 23:41

score 2 · Answer 3 · answered Mar 14 '11 at 18:52

To remove a marker just setMap(null) it.

<html>
<style type="text/css">
    #map_canvas {
        height: 760px;
        width: 1100px;
        position: static;
        top: 100px;
        left: 200px;
    }
</style>

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
    var oldMarker;

    function initialize() {
        var latlng = new google.maps.LatLng(42.55308, 9.140625);

        var myOptions = {
            zoom: 2,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);


        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });

        function placeMarker(location) {

            marker = new google.maps.Marker({
                position: location,
                map: map
                animation: google.maps.Animation.DROP,

            });

            if (oldMarker != undefined){
                oldMarker.setMap(null);
            }
            oldMarker = marker;
            map.setCenter(location);

        }


    }

</script>
</head>


<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>

that's true. I read the OP and thought I read delete marker and that was the only thing in my mind :) obviously thats the best answer :) — AlfaTeK, Mar 14 '11 at 19:01

Google maps moving marker on click

3 Answers3

Linked