CODEWITHSUNDEEP
google-maps-api-3google-maps-markersgeojson
SckNL
SckNL

Reputation: 31

Change anchor of geojson custom icon - google maps api

Is there any way I can change the anchor for geojson points? Below a stripped down version of my project.

The problem I'm facing is that these icons start to "float" away from their location once I zoom out. (using a 40x40 square icon).

I've seen a lot similair questions on this matter, however none of the examples involved markers generated using geojson and/or changing the icon using setStyle.

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 51.822976,
      lng: 4.128522
    },
    zoom: 8,
    minZoom: 2,
    maxZoom: 26,
    tilt: 0,

  });

  var infowindow = new google.maps.InfoWindow();
  var offices = new google.maps.Data();

  offices.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [4.403528, 51.260561]
        },
        "properties": {
          "Location": "Antwerp",
          "Country": "BE"
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [9.986818, 53.554377]
        },
        "properties": {
          "Location": "Hamburg",
          "Country": "DE"
        }
      }
    ]
  });

  offices.setStyle({
    icon: 'images/icons/logo-bl1.png'
  });
  offices.setMap(map);
  offices.addListener('click', function(event) {

    var office_location = event.feature.getProperty("Location");
    var office_country = event.feature.getProperty("Country");

    infowindow.setContent(office_location + " - " + office_country);

    infowindow.setPosition(event.feature.getGeometry().get());
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -30)
    });

    infowindow.open(map);
    map.panTo(event.latLng);
  });


  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();

  });
}

Upvotes: 0

Views: 433

Answers (1)

SckNL
SckNL

Reputation: 31

Figured it out by adding

var officeicon = {
    url: 'images/icons/logo-bl1.png',
    size: new google.maps.Size(40, 40),
    anchor: new google.maps.Point(20, 20)
};

and then

offices.setStyle({
    icon: officeicon,

Upvotes: 1

Related Questions