different markers on google maps v3 - json

Question

How can I add different markers to google map v3?
Here is example for my marker:
var latlng = new google.maps.LatLng(lat,lng);
var image = "../img/hotel_icon.png";
var locationDescription = this.locationDescription;
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'pk:'+name,
icon: image
});
bounds.extend(latlng);
setMarkes(map, marker, name, locationDescription);
});//close each
map.fitBounds(bounds);
});//close getjson
}//close initialize
function setMarkes(map, marker, name, locationDescription){
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.close();
infowindow.setContent('<h3>'+name+'</h3><em>'+locationDescription+'</em>');
infowindow.open(map, marker);
});
}

Answer 1

Here is one example that may help:
http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html
code snippet:
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
setMarkers(map, beaches);
}
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
function getMarkerImage(iconColor) {
if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
iconColor = "red";
}
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_" + iconColor + ".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return icons[iconColor];
}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('http://www.geocodezip.com/mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0, 0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(map, latlng, label, html, color) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
title: label,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, "red"],
['Coogee Beach', -33.923036, 151.259052, "blue"],
['Cronulla Beach', -34.028249, 151.157507, "green"],
['Manly Beach', -33.80010128657071, 151.28747820854187, "yellow"],
['Maroubra Beach', -33.950198, 151.259302, "orange"]
];
function setMarkers(map, locations) {
// Add markers to the map
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = createMarker(map, myLatLng, beach[0], beach[0], beach[3]);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
height: 100%;
padding: 0;
margin: 0
}
#map_canvas {
width: 100%;
height: 100%;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Answer 2

i have resolved a problem was easy just i have put this
var currentplace = $("#currentplace").text();
if(name == currentplace ){image = "../img/hotel_icon.png";}else{ image = "../img/home_icon.png";}