I got an google maps on my site which are great at the moment, except i would like to call an function for javascript when the marker is clicked. this is the google code for the marker:
var marker = new google.maps.Marker({
position: latingZee,
map: map,
title:"Hello World!",
icon: ZeeImg,
})
And i would to start the next action to be used when the marker is clicked
$('.toggler').live('click',function(){
$(this).parent().children().toggle();
});
Is this possible?
You could try:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').click();
});
but I'm not sure about mixing jQuery and Google API code in the same place.
Simple marker click like this:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').parent().children().toggle();
});
Related
I'm trying to create fullscreen google maps where a user can simply click on a location to add a marker and with that marker add a comment.
At the moment I have the click to place the marker working, but I can't seem to get the adding comment part.
Any idea how to get this working? I'm using HTML/JS
If by "Marker comment" you mean something like Info windows, then try following snippet:
google.maps.event.addListener(map, 'click', function(event) {
var result = prompt("Enter a value of comment for Marker.");
marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map
});
attachMessage(marker, result);
marker.setPosition(event.latLng);
});
function attachMessage(marker, message) {
var infowindow = new google.maps.InfoWindow({
content: message
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
It will popup the input window and use the entered text as value for InfoWindow.
Working fiddle: http://jsfiddle.net/87v0obb4/8/
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';
});
seems like a pretty basic thing, but I don't seem to be finding the answer.
Here's my Google Maps code:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(123, 123),
url: "http://www.google.com",
map: map
});
...
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
What do I need to change, to open the link in a new window?
Many thanks!
You have to use the method open of the window object like this:
window.open("http://www.w3schools.com");
So your code will be something like this:
google.maps.event.addListener(marker, 'click', function() {
window.open(marker.url);
});
Visit this link for an overview of the open method and the options you can set.
So I used this approach but when I was in a loop making lots of markers, each with a different URL, this was the approach I needed to take.
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker({
position: newLatlng,
map: map,
title: row[2],
url: row[3]
});
google.maps.event.addListener(marker, 'click', function() {
window.open('https://www.youtube.com/watch?v='+this.url);
});
Note that the key was using this.url in the listener code. If I used marker.url in the listener code, it would open the last of many urls for all of the markers.
I'm trying to remove a marker that was initialized like this:
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Marker 1',
icon: redPin
});
google.maps.event.addListener(marker, "click", function() {
showMarkerDialog(marker.position, "marker");
});
google.maps.event.addListener(marker, "dblclick", function() {
// Add a alert: Are you sure you want to remove this marker?
map.removeOverlay(marker);
});
Everything works perfectly except that when I double click it to remove what I get on the Error Console is this:
TypeError: Object # has no method 'removeOverlay'
What am I doing wrong?
There is no removeOverlay function on the map object. Sounds like you've got only one marker, why use an array? Just change this:
google.maps.event.addListener(marker, "dblclick", function() {
map.removeOverlay(marker);
});
to this:
marker.addListener("dblclick", function() {
marker.setMap(null);
});
I had code that was working for map V2 but have since upgraded to V3 and the constructors are different. I want to limit my map to 1 marker only. Here's the code to add a marker:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
....
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
map.setCenter(location);
I need code that will remove myListener once a marker is placed. Thanks for any help you can provide.
try google.maps.event.addListenerOnce() method instead
I used this code and it did the trick:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng), google.maps.event.removeListener(myListener);
});