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.

Getting marker customInfo by marker id in google maps

I need to open info window on map, when I click a link on the map page( not marker it self). Here is my code so far,
var marker = new MarkerWithLabel({
map: resultsMap,
id: label,
position: latlng,
title: "Address",
// radius: int_radius ,
draggable: false,
labelAnchor: new google.maps.Point(10, 35),
labelContent: label,
labelClass: "labels",
labelInBackground: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image,
customInfo: "dynamic data for each marker"
});
And calling function
function bindInfoWindow(resultsMap, marker, infoWindow) {
google.maps.event.addListener(marker, 'click',
function(){
infoWindow.setContent(marker.customInfo);
infoWindow.open(resultsMap,marker);
});
$(document).on('click','.store-title', function(){
var linkId = $(this).attr('id');
infoWindow.setContent(marker.customInfo);
infoWindow.open(resultsMap,marker);
});
}
In my situation I can't use an array to store markers. Is there way to get marker.customInfo by using condition like below? Please Note When I click on marker it works. I need it for latter onclick function.
infoWindow.setContent(marker.customInfo where marker.id==linkId);

This might work, keeping it inside your bindInfoWindow as you currently have it:
$(document).on('click','.store-title', function() {
var linkId = $(this).attr('id');
if (linkId == marker.id) {
google.maps.event.trigger(marker, 'click');
}
});
Notice I'm passing the marker as a data parameter to the click event handle, but you maybe don't need to do that. - not needed it seems.
And then I just trigger the click on that marker, rather than repeat the code that you've already got in the marker's click handler.
I'm assuming the id property you're adding to each marker is the same as the 'id' attribute you're reading on your links. If not, can you have some identical property on the markers and links that you can check.

Google Maps: Change infoWindow's Frame

I've created a marker and added a listener on this marker which opens an info window. My problem is that i can't figure it out how to change the default frame of the infoWindow. is it possible? here is my code:
var markerPosition = new google.maps.LatLng(lat, lng);
var shopMarker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: iconshop,
title: " shop",
draggable: false
});
var content = '<ul class="shopmaplist"> <li>text</li>'
+'<li><span>text</span>text</li>'
+'</ul><ul class="shoplistel">text</ul></br>'
+'<div class="buttonshop"><input type="submit" class="btncontinue" value="text" tabindex="3"></div>';
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(shopMarker,'click', (function(shopMarker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,shopMarker);
};
})(shopMarker,content,infowindow));
In this code what can i do to customize the infoWindow's frame and generally the style?
Edit:
the image below is the result that i want when i click the marker.

You can't change a google.maps.InfoWindow. You can use a "3rd party" InfoWindow replacement like InfoBubble or InfoBox or even create your own custom overlay

Setting custom icon Google Maps

I am trying to use a custom icon and set its size
var icon = new google.maps.Icon({
'anchor':null,
'origin':null,
'scaledSize':null,
'size':new google.maps.Size(value.width,value.height),
'url':'../maps/overlay_images/'+value.image
});
Setting the marker on the map,
var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(value.latitude), parseFloat(value.longitude)),
map: map,
title: value.name,
icon: icon ,
animation: google.maps.Animation.DROP
});
I get an "Uncaught TypeError: undefined is not a function" error
I could see a Icon object in the maps reference, what am I doing wrong here?
https://developers.google.com/maps/documentation/javascript/reference#Icon

google.maps.Icon is just an object specification, not a class with a constructor. Your code should look like this:
var icon = {
'size':new google.maps.Size(value.width,value.height),
'url':'../maps/overlay_images/'+value.image
};

You can just add a link to the image to display a custom marker icon.
var marker = new google.maps.Marker({
map: map,
position: position,
icon: "img/marker.png"
});
To edit the size, you can just change the size of the image.

Reposition of a google maps marker

I have several markers on a google map api v3 and i need to reposition the markers at regular intervals. I have given my markers specific names like markerA, markerB, ... markerO.
im trying to run this function to get access to right marker to reposition:
function moveMarker(marker,lat,lng) {
var newLatLng = new google.maps.LatLng(lat,lng);
marker.setPosition(newLatLng);
}
markers are created in the load process along with the map.
markerA = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: rodIcon, title: 'Car A'});
markerB = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: rodIcon, title: 'Car B'});
markerC = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: blaIcon, title: 'Car C'});
however, it seems like my function fails, and doesnt recognize the marker "name" given in the "marker" input of the function.
input to the function is similar to:
moveMarker(markerA,60,10)
but the marker doesnt move at all...
Am i missing something seriously basic, or is my idea repositioning each single marker by its name not the way to go?
i mean, i can hardcode
markerA.setPosition
markerB.setPosition etc... but that seems to be overkill?

Just use .setPosition() method. See http://jsfiddle.net/Ln2BM/1/ :
google.maps.event.addListener(marker, 'click', function() {
var pos = this.getPosition();
this.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() + 1));
});
If it doesn't work, then you must have made a different mistake. Quite suspicious sounds your sentence "my function fails, and doesnt recognize the marker "name" given in the "marker" input of the function". You probably have something wrong in your function call.