CODEWITHSUNDEEP
javascriptgoogle-maps
yasmine92
yasmine92

Reputation: 49

Display image in a google maps infoWindow

I'm facing some troubles displaying a picture in a google maps infoWindow. Actually, I have no problem displaying a picture using a web link, but when using a picture on my computer it doesn't work even if it's in the "JS" folder. Thanks in advance for your replies = )

Here is the code: 

function initialize()
{
 var myLatlng = new google.maps.LatLng(36.771186 , 3.001451);
 var map_canvas = document.getElementById('map_canvas');
 var map_options = {
   center: myLatlng,
   zoom: 15,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   };

var map = new google.maps.Map(map_canvas, map_options);

var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Agence "Amazing Designs"</h1>'+
  '<div id="bodyContent">'+
  '<img src="C:/Users/user/Documents/Aptana Studio 3 Workspace/ProjetWeb/JS/test.jpg"        width="300" height="200" />'+
  '</div>'+
  '</div>';

var infowindow = new google.maps.InfoWindow({
  content: contentString
});

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
}


google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 0

Views: 2346

Answers (3)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

don't provide the image url like that instead use .(dot) and /(slash)

try this format

<img src="../yourFolder/Aptana Studio 3 Workspace/ProjetWeb/JS/test.jpg">  // example location

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117334

Let's assume that you run this page on local filesystem(otherwise it will not work because of security-restrictions, as Carlo Moretto said):

The browser is not able to recognize that this is an absolute path, it will take the C as protocol(which is unknown)

Prepend the file-protocol:

file:///C:/Users/user/Documents/Aptana Studio 3 Workspace/ProjetWeb/JS/test.jpg

Upvotes: 0

Carlo Moretto
Carlo Moretto

Reputation: 365

The Google Chrome browser will not load local file by default due to security reason.

  1. Get the url of your Chrome Installation path to your chrome installation e.g C:\Users-your-user-name\AppData\Local\Google\Chrome\Application>

  2. Launch the Google Chrome browser from the command line window with the additional argument ‘–allow-file-access-from-files’.

  3. E.g ‘path to your chrome installation\chrome.exe --allow-file-access-from-files’

Upvotes: 0

Related Questions