I have a html form for adding new places in my data ,
I want the user add marker and delete last marker ,
I found this code but it is added more than one marker
How can make it delete the last one?
because I need just one marker? this is the demo of form http://saudi-hotels.info/add_hotel.php
<script type="text/javascript">
var map;
function mapa()
{
var opts = {'center': new google.maps.LatLng(26.12295, -80.17122),
'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'),opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('long').value = event.latLng.lng();
document.getElementById('lat').value = event.latLng.lat();
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()),
});
}
);
}
</script>
please help me ,
You can create a global variable that tracks the last created marker:
var lastMarker;
And then, whenever you create a new marker, set lastMarker to the newly created marker:
lastMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(26.12295, -80.17122)
});
Then, whenever you want to remove the last created marker, you can use the lastMarker variable:
lastMarker.setMap(null);
Related
I have a simple google maps , and I am creating a simple map with a marker with the below code:
var mapElement = document.getElementById('hr-map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(25.098353, 55.156124),
map: map,
title: 'HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
Now all I wanted to do is move the marker from the center of the map to somewhere below the center, I googled and check the below two links, one is a SO question and the fiddle demonstrating changing the marker position.
FIDDLE HERE
SO THREAD
Now I used the same line of code used in the fiddle and also in the SO thread and wrote the below line of code:
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
But adding the above line of code actually makes the entire marker disappear. So now my code looks line below:
var mapElement = document.getElementById('dynamic-hr-map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(25.098353, 55.156124),
map: map,
title: 'Dynamic HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
So well why is my marker disappearing in the first place ? Is there any solution to this ?
You are missing the new keyword. You need to create a new instance of LatLng object before using it.
marker.setPosition(new google.maps.LatLng(25.098353, 55.156124));
This is my code
var map_canvas = document.getElementById('map_canvas');
var map_options = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(map_canvas, map_options);
google.maps.event.addListener(map, 'click', function(event) {
if(marker){
marker.setMap(null);
}
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
$("#latitude").val(event.latLng.lat());
$("#longitude").val(event.latLng.lng());
map.setCenter(event.latlng);
});
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
}
please notice that I have added a listener for on click on the map to add the marker, and it is working. I mean when I click on the map, the marker appears.
However, when I submit the page, and if there is an error in the inputs, I return the page back to the user. In that case, if the use has added a map, I wanted to create the map for him. that is why I used this code:
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
however, i got exception Uncaught TypeError: undefined is not a function in the line marker = new google.maps.marker({ could you help please?
Make sure you use the right capitalization for Google Maps API function names, google.maps.marker should be google.maps.Marker.
I've got an issue, I can't make the marker clickable for my project. I've tried with google.com but nothing works. Can some one help me ?
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
<!--Add markers to map using previously specified locations-->
var marker = new google.maps.Marker({
position: myLatlng,
url:'http://www.google.com',
title: 'Tobermory Distillery',
map: map,
});
Thanks
you can bind onclick to markers like this:
google.maps.event.addListener(marker, 'click', function() {
location.href = 'http://www.google.com';
});
The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}
You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});
The following sample code provided by google maps api
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
the following only shows google map of the location without a marker.
I was wondering how I can place a marker by giving latitude/longitude parameters?
And how is it possible to store my own information pulled from a database on that marker?
Here is a JSFiddle Demo that shows you how to set a google map marker by Lat Lng and also when click would give you an information window (bubble):
Here is our basic HTML with 3 hyperlinks when clicked adds a marker onto the map:
<div id="map_canvas"></div>
<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>
First we set 2 global variables. one for map and another an array to hold our markers:
var map;
var markers = [];
This is our initialize to create a google map:
function initialize() {
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
We then create 3 lat lng locations where we would like to place our markers:
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
Here we create a function to add our markers based on whatever is passed onto it. myloc will be either usa, brasil or argentina and we then create the marker based on the passed param. With in the addMarker function we check and make sure we don't create duplicate marker on the map by calling the for loop and if we the passed param has already been created then we return out of the function and do nothing, else we create the marker and push it onto the global markers array. After the marker is created we then attach an info window with it's associated marker by doing markers[markers.length-1]['infowin'] markers.length-1 is just basically getting the newly pushed marker on the array. Within the info window we set the content using html. This is basically the information you put into the bubble or info window (it can be weather information which you can populate using a weather API and etc). After info window is attached we then attach an onclick event listener using the Google Map API's addListener and when the marker is clicked we want to open the info window that is associated with it by calling this['infowin'].open(map, this) where the map is our global map and this is the marker we are currently associating the onclick event with.
function addMarker(myloc) {
var current;
if (myloc == 'usa') current = usa;
else if (myloc == 'brasil') current = brasil;
else if (myloc == 'argentina') current = argentina;
for (var i = 0; i < markers.length; i++)
if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;
markers.push(new google.maps.Marker({
map: map,
position: current,
title: myloc
}));
markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
content: '<div>This is a marker in ' + myloc + '</div>'
});
google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
this['infowin'].open(map, this);
});
}
When all is done we basically attach window.onload event and call the initialize function:
window.onload = initialize;