How can I add an Infowindow to a google map without a marker

Question

How can I add an infowindow to a map without a marker where I can specify the position (latlng) manually. There is a solution here which uses the click location, but I want to specify it myself. So far, I tried:

var infowindow = new google.maps.InfoWindow({
    content: "You start here",
    position: document.getElementById('start').value
  });

inside the map initialization function and used this code:

  infowindow.open(map, new google.maps.LatLng(6.473500, 81.236577));

inside the listener but it didn't work. An error comes up saying it cannot read the latlng given to open the infowindow. Any ideas?

geocodezip geocodezip · Accepted Answer · 2015-10-28T14:12:11

You have to set the position, either with a google.maps.Marker object in the open call, or if you don't have a marker, setting the position directly. This works:

var infowindow = new google.maps.InfoWindow({
    content: "You start here",
    position: new google.maps.LatLng(6.473500, 81.236577)
});
infowindow.open(map);

fiddle

code snippet:

function loadMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(6.473500, 81.236577)
  });
  var infowindow = new google.maps.InfoWindow({
    content: "You start here",
    position: new google.maps.LatLng(6.473500, 81.236577)
  });
  infowindow.open(map);
}
window.onload = loadMap();

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

How can I add an Infowindow to a google map without a marker

1 Answers