Google Maps, There can be only one...Marker
only allow one marker at a time.
by nicolas tenorio
HTML
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsTmAbnQDQXRM0OZAIdPHVlCLgZe83xdc&libraries=places"></script>
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">mapa</a>
<div data-role="popup" id="popupBasic">
<span id="coor"></span><a id="cor">enviar</a>
<div id="map"></div>
</div>
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
var map;
var marker;
function placeMarker(location) {
if (marker) {
//if marker already was created change positon
marker.setPosition(location);
//marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
} else {
//create a marker
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
//marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
}
}
var geocoder = new google.maps.Geocoder;
function handleEvent(event) {
var latng = event.latLng.lat() + "," + event.latLng.lng();
geocodeLatLng(geocoder,latng)
}
function geocodeLatLng(geocoder,latng) {
//var input = $("#coor").html()
var latlngStr = latng.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
coor.innerHTML = results[0].formatted_address
$("#cor").click(function(){$(dib).attr("name", "[" +latng + "]")})
} else {
window.alert('No results found');
}
} else {
// window.alert('Geocoder failed due to: ' + status);
}
});}
function initialize() {
var centerPosition = new google.maps.LatLng(3.429039443567949, -76.52977866725166);
var options = {
zoom: 13,
center: centerPosition,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
google.maps.event.addListener(map, 'click', function(evt) {
placeMarker(evt.latLng);
handleEvent(evt)
});
}
google.maps.event.addDomListener(window, 'load', initialize);