CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Philip7899
Philip7899

Reputation: 4677

google maps api centers to right location but arrow points to different one

I am using the Google Maps API. It's working for the most part, except I can't get the arrow to point to the right place. Here's my code:

<div id="map1" style="height: 200px"></div>
<script>
    function createInfoWindowContent() {
      return ['the place', 'the city'].join('<br>');
    }
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Options for Google map
        // More info see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions1 = {
            zoom: 14,
            center: new google.maps.LatLng(42.366012, -71.098702)
            // Style for Google Maps

        };

        // Get all html elements for map
        var mapElement1 = document.getElementById('map1');

        // Create the Google Map using elements
        var map1 = new google.maps.Map(mapElement1, mapOptions1);

          var coordInfoWindow = new google.maps.InfoWindow();
          coordInfoWindow.setContent(createInfoWindowContent());
          coordInfoWindow.open(map1);

    }

</script>

The code above does correctly center the map at the right location, but the pointer is all the way at the left and not pointed towards the location. Here's a screenshot: the place

How do I move the pointer? I'm sure the answer is simple but I'm having trouble with it.

Upvotes: 0

Views: 155

Answers (3)

geocodezip
geocodezip

Reputation: 161384

Srt the position of the InfoWindow using its .setPosition method:

var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.setPosition(mapOptions1.center);
coordInfoWindow.open(map1);

fiddle

or set it in its constructor:

var coordInfoWindow = new google.maps.InfoWindow({
  content:createInfoWindowContent(), 
  position: mapOptions1.center
});
coordInfoWindow.open(map1);

fiddle

code snippet:

function createInfoWindowContent() {
  return ['the place', 'the city'].join('<br>');
}
google.maps.event.addDomListener(window, 'load', init);

function init() {
  // Options for Google map
  // More info see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
  var mapOptions1 = {
    zoom: 14,
    center: new google.maps.LatLng(42.366012, -71.098702)
      // Style for Google Maps

  };

  // Get all html elements for map
  var mapElement1 = document.getElementById('map1');

  // Create the Google Map using elements
  var map1 = new google.maps.Map(mapElement1, mapOptions1);

  var coordInfoWindow = new google.maps.InfoWindow();
  coordInfoWindow.setContent(createInfoWindowContent());
  coordInfoWindow.setPosition(mapOptions1.center);
  coordInfoWindow.open(map1);

}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map1" style="height: 200px"></div>

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55772

The second object to the open method takes an anchor object:

coordInfoWindow.open(map1,{position:map1.getCenter()})

Reference: https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow

Upvotes: 2

user4974193
user4974193

Reputation:

You can set the position of an infoWindow with an InfoWindowOptions object or the setPosition(LatLng) method. https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

Upvotes: 1

Related Questions