CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
m.m
m.m

Reputation: 41

How to get only one marker in the Google Maps API with JavaScript

My code:

<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

I've got every kilometer a new marker. How can I remove the other if I click it again?

Btw: read this :Google Maps how to get to show only one marker?

Wanted to use it, but it doesn't work (in console: CurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.)

Upvotes: 3

Views: 4470

Answers (2)

geocodezip
geocodezip

Reputation: 161384

One option if you only ever want one marker, only create one and move it as required.

proof of concept fiddle

code snippet:

var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var marker;
var infowindow;

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

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

function placeMarker(location) {
  if (!marker || !marker.setPosition) {
    marker = new google.maps.Marker({
      position: location,
      map: map,
    });
  } else {
    marker.setPosition(location);
  }
  if (!!infowindow && !!infowindow.close) {
    infowindow.close();
  }
  infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap"></div>

Upvotes: 3

Florian Humblot
Florian Humblot

Reputation: 955

Instead of this:

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

try using this:

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

So, you're deleting all the current markers on click and adding the new marker at x,y position

Upvotes: 0

Related Questions