Image on popup window in google maps v3 api? -


how can put image on popup window when click on marker (bondi beach) in google maps v3 ? :

here code :

var locations = [ // here put image ['bondi beach', -33.890542, 151.274856, 4], ];  var map = new google.maps.map(document.getelementbyid('map'), {   zoom: 7,   center: new google.maps.latlng(46.713251, 7.833252),   maptypeid: google.maps.maptypeid.roadmap, });  map.setoptions({styles: styles}); var infowindow = new google.maps.infowindow(); var marker, i;  (i = 0; < locations.length; i++) {     marker = new google.maps.marker({      position: new google.maps.latlng(locations[i][1], locations[i][2]),      map: map   });   google.maps.event.addlistener(marker, 'click', (function(marker, i) {      return function() {     infowindow.setcontent(locations[i][0]);     infowindow.open(map, marker);      }    })(marker, i)); } 

try :

<div id="map" style="width:500px;height:500px;"></div> 

script :

var locations = [     ['bondi beach', -33.890542, 151.274856, 'http://www.destination360.com/australia-south-pacific/australia/images/s/australia-bondi-beach.jpg'],     /*     add more locations here on form :     [ name, lat, long, img ]     [ name, lat, long, img ]     ..     */ ];  function initialize() {     var map = new google.maps.map(document.getelementbyid('map'), {           zoom: 7,           center: new google.maps.latlng(-33.890542, 151.274856),           maptypeid: google.maps.maptypeid.roadmap,     });      var infowindow = new google.maps.infowindow();     var marker, i;      (i = 0; < locations.length; i++) {           marker = new google.maps.marker({             position: new google.maps.latlng(locations[i][1], locations[i][2]),             map: map         });          google.maps.event.addlistener(marker, 'click', (function(marker, i) {             return function() {                 var content=locations[i][0]+'<br><img src="'+locations[i][3]+'" style="width:300px;">';                 infowindow.setcontent(content);                 infowindow.open(map, marker);             }         })(marker, i));     } } google.maps.event.adddomlistener(window, 'load', initialize); 

demo

result :

enter image description here


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -