Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding image in infowindow of Google Maps?

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>
like image 670
alu268 Avatar asked Nov 18 '15 19:11

alu268


People also ask

How do I edit InfoWindow on Google Maps?

To customize the info window in Classic: Click Visualize > Map. Click the "Configure info window" link above the map and select the template to use.

How do I change the background color of InfoWindow in Google Maps?

addListener(marker, 'mouseover', function() { infoWindow. setContent(html); infoWindow. open(map, marker); //infoWindow. setStyle("background-color: red"); });

How do I add buttons to InfoWindow?

addListener(marker, 'click', function() { infowindow. setContent('<p>Event Name: '+this. title+'</p>' + '<p>Event Type: '+this. etype+'</p>' + '<p>Cause: '+this.


1 Answers

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>"
});

proof of concept fiddle

screenshot of map with image in infowindow

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>
like image 138
geocodezip Avatar answered Oct 27 '22 03:10

geocodezip