How do I offset a Google Map Marker?

Question

I've read a few posts on here regarding the same thing. I have the code used, but I'm not sure if I'm using it correctly. The one thing they didn't really say was how would that code be used with the other javascript for Google Maps that controls the parameters, styling, etc.

Here's the snippet from the other thread:

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

}

And this is my current Javascript for my map:

var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 16,
        center: latlng,
        scrollwheel: false,
        disableDefaultUI: true,
        draggable: false,
        keyboardShortcuts: false,
        disableDoubleClickZoom: false,
        noClear: true,
        scaleControl: false,
        panControl: false,
        streetViewControl: false,
        styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.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":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var geocoder_map = new google.maps.Geocoder();
    var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
    geocoder_map.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var image = "../wp-content/themes/rawafid-systems/assets/img/pin.svg";
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: map.getCenter()
            });
            var contentString = 'Tagline';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

How do I incorporate the snippet from the other article? Right now you can see here that the map marker is right in the center. I'd like to offset it so it appears more to the right so it's not hidden.

Answer 1

Call the offsetCenter function after you set the map center (in the geocoder callback function).

proof of concept fiddle

code snippet:

var map;

function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 16,
    center: latlng,
    scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    disableDoubleClickZoom: false,
    noClear: true,
    scaleControl: false,
    panControl: false,
    streetViewControl: false,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "hue": "#FFBB00"
      }, {
        "saturation": 43.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": "#00FF6A"
      }, {
        "saturation": -1.0989010989011234
      }, {
        "lightness": 11.200000000000017
      }, {
        "gamma": 1
      }]
    }],
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var geocoder_map = new google.maps.Geocoder();
  var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
  geocoder_map.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: map.getCenter()
      });
      var contentString = 'Tagline';
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      // move center 200 pixels to the right.
      offsetCenter(map.getCenter(), 200, 0)
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.LEFT_CENTER].push(centerControlDiv);
}
google.maps.event.addDomListener(window, "load", initialize);

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx / scale) || 0, (offsety / scale) || 0)

    var worldCoordinateNewCenter = new google.maps.Point(
      worldCoordinateCenter.x - pixelOffset.x,
      worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

  }
  /**
   * The CenterControl adds a control to the map that recenters the map on
   * Chicago.
   * This constructor takes the control DIV as an argument.
   * @constructor
   */

function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.setAttribute("style", "display:block;width:400px;background-color:white;height:100px; border: 1px black solid;");
  controlUI.style.width = '400px';

  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Test Text';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

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>