1

We're using Google Maps API to display a map, which is working fine.

I see lots of complaints where the marker on people's maps isn't in the center.

We actually want the opposite, due to the location of the premises on this particular map we'd like to have the map slightly off-center with the location and its marker towards the top-right corner of the map (to clarify, we want to essentially shift the map canvas, not change the actual location of the premises).

Below is the code we're using. The center: latlng is what centers the map, so I know we need to change the center parameter to something else, but I'm not sure what.

<script src="//maps.google.com/maps/api/js?sensor=false&amp;region=GB"></script>
<script>
var geocoder1 = new google.maps.Geocoder;
geocoder1.geocode( { 'address': "360 Any Street, 12345"}, function(results, status) {
    myGeocode(results, status, 'map_canvas');
});
function myGeocode(results, status, canvas) {
    if (status == google.maps.GeocoderStatus.OK) {
        var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new google.maps.Map(document.getElementById(canvas), myOptions);
        var myMarker = new google.maps.Marker({ position: latlng, map: map });
    } else {
        // alert("Geocode was not successful for the following reason: " + status);
    }
}
</script>
<div id="map_canvas" style="width: 600px; height: 600px;"></div>
MrCarrot
  • 2,546
  • 1
  • 23
  • 29
  • possible duplicate of [How to offset the center point in Google maps api V3](http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3) – geocodezip Dec 06 '14 at 14:54

1 Answers1

4

This is a solution for the current case, but won't set the center to get the desired view when zoom changes. If you want more elegant solution, you can reset the center after each zoom_changed event with a formula including zoom value.

...
var myMarker = new google.maps.Marker({ position: latlng, map: map });
var offsetLat = -0.02;
var offsetLng = -0.02;
map.setCenter(new google.maps.LatLng((map.getCenter().lat() + offsetLat) , (map.getCenter().lng() + offsetLng))); 
} else {
...
Arslan Taşkın
  • 136
  • 3