change the place of the marker with the click - google-maps

i am working on google maps, what i want to do is to click on the map it add a marker to the map its working fine but the problem is that i need to move the same marker to a new place if i click some where else instead of new marker. and also when i click on any point it give me the address of that place in a text field
here is my code
<script type="text/javascript">
var map;
var markersArray = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 7,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
}

You can call clearOverlays anytime you create a new marker.this way you hide the previous marker and only the new is shown.
another way is to have a var marker just as you have a var map. you can edit the markers position in addMarker.
as far as geocoding is concerned take a look at this

Related

Google Map add marker from two text boxes values (lat & lng)

I have an app where the user clicks on the map to create a marker and store it in the database.
This code under my question works fine, but now I would like to add a function to display a marker from lat and lng values ​​contained in two text boxes (camera_lat and camera_long) imported from the database.
Does anyone know how to do that ?
let map;
var marker;
function initmap() {
var latlng = new google.maps.LatLng(43.920340, 7.1325917);
var myOptions = {
zoom: 9,
center: latlng,
gestureHandling: 'greedy'
};
map = new google.maps.Map(document.getElementById("div_map"), myOptions);
google.maps.event.addListener(map, "click", function(event) {
// get lat/lon of click
clickLat = event.latLng.lat();
clickLon = event.latLng.lng();
// show in input box
document.getElementById("camera_lat").value = clickLat.toFixed(5);
document.getElementById("camera_long").value = clickLon.toFixed(5);
// if marker exist remove it show only one marker
if(marker != null){
marker.setMap(null);
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(clickLat,clickLon),
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initmap);
Take the values from the input fields, use them to make a google.maps.LatLng object, use that to position the marker.
make a function to add the marker:
function addMarker(latLng, map) {
// if marker exist remove it show only one marker
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map
});
}
if you want to add the marker on page load (and have data in the input fields at that time, call the function after instantiating the map:
var lat = document.getElementById("camera_lat").value;
var lng = document.getElementById("camera_long").value;
addMarker(new google.maps.LatLng(lat, lng), map);
then use that in the existing code and in a click listener function on a button to add the marker:
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var lat = document.getElementById("camera_lat").value;
var lng = document.getElementById("camera_long").value;
addMarker(new google.maps.LatLng(lat, lng), map);
});
proof of concept fiddle
code snippet:
let map;
var marker;
function initmap() {
var latlng = new google.maps.LatLng(43.920340, 7.1325917);
var myOptions = {
zoom: 9,
center: latlng,
gestureHandling: 'greedy'
};
map = new google.maps.Map(document.getElementById("div_map"), myOptions);
var lat = document.getElementById("camera_lat").value;
var lng = document.getElementById("camera_long").value;
addMarker(new google.maps.LatLng(lat, lng), map);
google.maps.event.addListener(map, "click", function(event) {
// get lat/lon of click
clickLat = event.latLng.lat();
clickLon = event.latLng.lng();
// show in input box
document.getElementById("camera_lat").value = clickLat.toFixed(5);
document.getElementById("camera_long").value = clickLon.toFixed(5);
addMarker(event.latLng, map);
});
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var lat = document.getElementById("camera_lat").value;
var lng = document.getElementById("camera_long").value;
addMarker(new google.maps.LatLng(lat, lng), map);
});
}
function addMarker(latLng, map) {
// if marker exist remove it show only one marker
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initmap);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#div_map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<input id="camera_lat" value="43.661" />
<input id="camera_long" value="6.90188" />
<input id="btn" value="add marker" type="button" />
<div id="div_map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
</body>
</html>

Google Map not loaded in second time in bootstrap modal

This script is creating a problem that when i used to load google map in bootstrap modal.
First time map is loaded but with second time map is not loaded fully.
<script>
var map = '';
function showmap(){
if(!map){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(23.6459, 81.9217),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
google.maps.event.addListener(map, "click", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
//document.getElementById("zoom").value = map.getZoom();
});
google.maps.event.addListener(map, "center_changed", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
//document.getElementById("zoom").value = map.getZoom();
});
}
}
</script>
<script>
var map = '';
function showmap(){
if(!map){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(23.6459, 81.9217),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
^^^^ Remove var from here and it works fine
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
google.maps.event.addListener(map, "click", function(){
document.getElementById("latitude").value = map.getCenter().lat();
document.getElementById("longitude").value = map.getCenter().lng();
marker.setPosition(map.getCenter());
});
}
}
</script>
in function when assigning map variable again in modal is creating problem so to remove conflict just remove var map when assingin it to google.maps
This is meant to be a comment but I am not allowed to add comments at this time.
I also experience the same in an MVC app. Modal content (resource title and map) is loaded as partial view from a controller action. First map loads nicely but next map(s) are clipped and only top left part shows. Using Bootstrap 3.
It is worth mentioning that if you refresh the page, the map loads well but that's not practical.

Remove default markers in google maps

I recently learn t to add custom markers to the Google maps. So i created a route with directions API. After that I added my own markers. Now i am facing a problem where both, the original one and the custom one are showing up. How can i remove the default markers to show my originals one.
Code I wrote to add custom markers
function addmarkers()
{
$.each(order,function(key,value)
{
geocoder.geocode( { 'address': waypts[value]}, function(results)
{
var source = 'images/markers/'+i+'.png';
var latlang = results[0].geometry.location;
var marker = new google.maps.Marker({
position: latlang,
map: map,
icon: source
});
});
});
};
I am calling this function just after the initialize() function
function initialize() // creating maps
{
google.maps.visualRefresh = true;
currentlocation = new google.maps.LatLng(mylat,mylong);
var mapoptions =
{
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: currentlocation
}
map = new google.maps.Map(document.getElementById('map'),mapoptions);
addmarkers();
directionsDisplay.setMap(map);
};
Now you can see in the pic, I am getting both the default as well as the customized markers. Where is this going wrong ?

How to link a button to a google map marker?

I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);

Google maps API marker - mouseover instead of click - using kml

I wanna simply get markers from a kml file and show them on a map, but add "mouseover" for tooltip, not click
using this code, but it don't work (works if i use click)
function initialize() {
var latlng = new google.maps.LatLng(53.477876, -2.471289);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//kml begin
var nyLayer = new google.maps.KmlLayer('http://code.nebtron.com/kml2.kml', {suppressInfoWindows: false});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, "mouseover", function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
function showInDiv(text) {
var sidediv = document.getElementById('contentWindow');
sidediv.innerHTML = text;
}//kml end
}
Demo: http://code.nebtron.com/map3.php
As pointed out here, there is no mouseover event for KMLLayers. But maybe you could use a polygon. Here's a link.
Hope this helps!