We Keep Coding

Google maps api show images from DB

I have the following data that come from an ajax call:
data: [
rest1: {
latlng: ["40.7143528","-74.0059731"],
link: "restaurant1.jpg"
},
rest2: {
latlng: ["40.82148067","-74.35135579"],
link: "restaurant2.jpg"
}
]
How can I show the images in my map in their specific coordinates? I know how to do it using marker and infowindow
Add a marker and then add the image in the infowindow.
But how I can show the image in the place of the marker? Without infowindow

Suppose you have stored the address of the picture in a variable address and the position of the marker in a variable position. Then, your code should looks like this:
var beachMarker = new google.maps.Marker({
position: position,
map: map,
icon: address
});
So, when you get your json file, you may first parse it like this:
data = JSON.parse (data);
Then, you can use the data like this:
var beachMarker = new google.maps.Marker({
position: {data.rest1.latlng[0], data.rest1.latlng[1]},
map: map,
icon: data.rest1.link
});
Please consult the google documentation.
Tell me if you have some comments.

Leaflet add Marker after loading the map

How is it possible to add an additional marker after the map is already loaded?
I tried to add a marker with a button:
L.easyButton('fa-compass',
function (){
var newMarker = new L.marker(47.972850,7.856000).addTo(map);
map.update()},
'Interact with the map'
).addTo(map)
The new marker doesn't show up. How is it possible to add the marker to the map?

You can directly use L.marker for this here place is a object of lat and long and map is your map holder
L.marker(place, {
draggable: true,
title: "my point",
alt: "my point",
riseOnHover: true
}).addTo(map)
See this http://jsfiddle.net/LnzN2/582/ for demo

Referencing a specific Google map marker

. .
I've created a Google map (V3) that includes multiple markers. I've come across a need to redefine properties for specific markers. However, I have not been able to find any way to refer to specific marker objects.
To give you an example of what I'm trying to do, let's say I have a US map onto which I've placed markers on New York, Chicago, and Los Angeles. Let's say I've defined them as follows:
var marker = new google.maps.Marker({map: map, position: lat-long-NY, title: "Yankees"}); // NY
var marker = new google.maps.Marker({map: map, position: lat-long-Chi, title: "White Sox"}); // Chicago
var marker = new google.maps.Marker({map: map, position: lat-long-LA, title: "Angels"}); // LA
Now, let's say I want to go back and reset the marker titles as follows:
google.maps.Marker({map: map, position: lat-long-NY, title: "Mets"}); // NY
google.maps.Marker({map: map, position: lat-long-Chi, title: "Cubs"}); // Chicago
google.maps.Marker({map: map, position: lat-long-LA, title: "Dodgers"}); // LA
So, how do I do this (or, for that matter, is it even possible)? I've tried putting the markers in an array and setting an ID for them, but to no avail. I've also thought about, but haven't tried, referring to them by their title (that's probably next), but I'm not even sure if this is possible. I have not been able to find anything like this in Google's documentation.
Does anyone know if this is possible?
Thanks in advance . . .

You should use better names when you create the markers.
var NY_marker = new google.maps.Marker({map: map, position: lat-long-NY, title: "Yankees"}); // NY
var Chi_marker = new google.maps.Marker({map: map, position: lat-long-Chi, title: "White Sox"}); // Chicago
var LA_marker = new google.maps.Marker({map: map, position: lat-long-LA, title: "Angels"}); // LA
Then, you just need to do this:
NY_marker.setTitle("Mets");
Chi_marker.setTitle("Cubs");
LA_marker.setTitle("Dodgers");
More getters and setter for you to manipulate your markers:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker

set animation google maps marker

well im trying to set the BOUNCE animation to a specific marker but whenever i call the marker.setAnimation(google.maps.Animation.BOUNCE) method console says "Cannot read property 'BOUNCE' of undefined" this means that marker is not defined right? but if I use marker.setTitle('Bouncing') the title does change. am i doing something wrong , here is the code
<script type="text/javascript">
function addMarker(lat,lng,img,title,bounce)
{
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img,
title: title,
zIndex: 1
});
if(bounce=='set'){marker.setAnimation(google.maps.Animation.BOUNCE);
marker.setTitle('Bouncing');};
}
</script>
php script
for($i=0;$i<count($losDatos);$i++)
{
$utc=new DateTime($losDatos[$i]['fechaUtc']);
$utc->modify('-'.horarioVerano().' hours');
echo $utc->format("Y-m-d H:i:s");
if($losDatos[$i]['camion']==$camion)
{
$script.="addMarker(".$losDatos[$i]['latitud'].",".$losDatos[$i]['longitud'].",".$losDatos[$i]['img'].",".$losDatos[$i]['nombre'].",'set');";
}else
{
$script.="addMarker(".$losDatos[$i]['latitud'].",".$losDatos[$i]['longitud'].",".$losDatos[$i]['img'].",".$losDatos[$i]['nombre'].");";
}
}
echo $script;

try:
marker.setAnimation(google.maps.Animation.BOUNCE)

The way You specified it in you code is correct.
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
What you should check is if the marker is really referencing a marker object on the map.
OR
You can try setting the animation through marker options.
var markerOptions = {animation:google.maps.Animation.BOUNCE}
or Try setting the animation without the if(condition) to to see if it bounces.
Also please check for equality this way in your if statement
if(bounce==="set"){ /*animate marker*/}

The setAnimation param should be a string of either "BOUNCE" or "DROP".
marker.setAnimation("BOUNCE");
or
marker.setAnimation("DROP");
where marker is a google maps marker object:

Marker on Google Map added only once

Each time I click on the map a new marker is placed on the map. The problem is that I need only one marker and if I click several times, each time a new marker is added.
How do I change the code so only one marker is placed and when the map is clicked again it changes its location?
Here is my code so far:
function clicked(overlay, latlng) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
var marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}

I would recommend keeping an instance of marker2 outside of the clicked function, then if marker2 is null, make and add a new one like you are now, otherwise call marker2.setLatLong(latlng); to update it's location.
Untested example code:
var marker2;
function clicked(overlay, latlng) {
if (marker2 == null) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}
else {
marker2.setLatLong(latlng);
}
}

You will need to implement some sort of check to see if the marker has already been placed. One option would be to keep a list of markers already added and check that list for a marker at a specific point before calling the functions to add the marker to the map. If you need a code sample, let me know.

Well, dont bother, I figured it out myself. I just used map.clearOverlays(); before the marker is pplaced and that solved the problem.