I'd like to add a float:left logo next to my address in the infowindow, how can I do that? Here is my code:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(18.5231,-72.2929),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:
[{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":63.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#008349"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]
}
var map = new google.maps.Map(mapCanvas, mapOptions)
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(18.5231,-72.2929),
icon: "img/mapmarker.png"
});
infowindow = new google.maps.InfoWindow({
content:"<b>Title</b><br/>123 Address<br/> City,Country" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Simplest way. Add a div float:left
in the infowindow.
infowindow = new google.maps.InfoWindow({
content: "<div style='float:left'><img src='http://i.stack.imgur.com/g672i.png'></div><div style='float:right; padding: 10px;'><b>Title</b><br/>123 Address<br/> City,Country</div>"
});
code snippet:
var geocoder; var map; function initialize() { var mapCanvas = document.getElementById('map'); var mapOptions = { center: new google.maps.LatLng(18.5231, -72.2929), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: styles } var map = new google.maps.Map(mapCanvas, mapOptions) marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(18.5231, -72.2929), icon: "img/mapmarker.png" }); infowindow = new google.maps.InfoWindow({ content: "<div style='float:left'><img src='http://i.stack.imgur.com/g672i.png'></div><div style='float:right; padding: 10px;'><b>Title</b><br/>123 Address<br/> City,Country</div>" }); google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); infowindow.open(map, marker); } google.maps.event.addDomListener(window, 'load', initialize); var styles = [{ "featureType": "landscape", "stylers": [{ "hue": "#FFBB00" }, { "saturation": 63.400000000000006 }, { "lightness": 37.599999999999994 }, { "gamma": 1 }] }, { "featureType": "road.highway", "stylers": [{ "hue": "#FFC200" }, { "saturation": -61.8 }, { "lightness": 45.599999999999994 }, { "gamma": 1 }] }, { "featureType": "road.arterial", "stylers": [{ "hue": "#FF0300" }, { "saturation": -100 }, { "lightness": 51.19999999999999 }, { "gamma": 1 }] }, { "featureType": "road.local", "stylers": [{ "hue": "#FF0300" }, { "saturation": -100 }, { "lightness": 52 }, { "gamma": 1 }] }, { "featureType": "water", "stylers": [{ "hue": "#0078FF" }, { "saturation": -13.200000000000003 }, { "lightness": 2.4000000000000057 }, { "gamma": 1 }] }, { "featureType": "poi", "stylers": [{ "hue": "#008349" }, { "saturation": -1.0989010989011234 }, { "lightness": 11.200000000000017 }, { "gamma": 1 }] }];
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>
Simply add the <img ...
to your content
infowindow = new google.maps.InfoWindow({
content:"<img src='yourpath/yourlogo'><b>Title</b><br/>123 Address<br/> City,Country" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.