将图像添加到 Google 地图标记

Question

I was trying to add images to infoWindow in Google maps but I failed because I don't know syntax. Can anyone help me??

var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(-36.848461,174.7633),
            title:"hello"
        });

marker1.setMap(map);

var infowindow1 =  new google.maps.InfoWindow({
            content: 'hey there',
            map: map,
        });

google.maps.event.addListener(marker1, 'mouseover', function() {
        infowindow1.open(map,marker1);
    });

google.maps.event.addListener(marker1, 'mouseout', function() {
        infowindow1.close();
    });

Above code only shows the text. How I add Image to infoWindow which will appear on mouse hovering

Thanks.

Answer 1

That is easy. Just add an img tag into your content-

 // This example displays a marker at the center of Australia. // When the mouse pointer hovers over the marker, an info window opens. function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var contentString = '<div><p>Here is your image</p><img style="height:100px;width:150px;" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Uluru_%28Helicopter_view%29-crop.jpg" /></div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: uluru, map: map, title: 'Uluru (Ayers Rock)' }); marker.addListener('mouseover', function() { infowindow.open(map, marker); }); marker.addListener('mouseout', function() { infowindow.close(); }); }

I've collected it from Here