While integrating the Google map we need to display the location according to the latitude and the longitude.
So in that case we need to make the use of the marker functionality for displaying it.
So if we want to change the image that the location is displaying using its marker we can change it if we want to.
function initialize() {
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image;
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var contentString = '<div id="content" style="margin-left:15px; margin-top:3px;overflow:hidden;">' +
'<div id="bodyContent">' + '<img src=' + data.image + ' style="width:172px;height:45px;" alt="WebStreet.in"/>' + '<br><font style="color:darkblue;font:11px tahoma;margin-left:5px;">' + data.title + ' Your Trusted IT Solutions Provider</font>' +
'</div>' +
'</div>';
//var marker = new google.maps.Marker({
//position: myLatlng,
//map: map,
//title: data.title,
//});
var marker = new google.maps.Marker({
map: map,
// draggable:true,
// animation: google.maps.Animation.DROP,
position: myLatlng,
title: data.title,
icon: 'http://maps.google.com/mapfiles/kml/pal3/icon55.png' // null = default icon
});
We have the icon property where we can put the path of the image we want to display.
0 Comment(s)