map.panby(x,y) where to place in google map code

Question

Since days I tried to find the right place again and again but without any luck. I can't find out where to place the map.panby ( x , y )in my following google maps code to get the marker a bot more on the right.

It would be great if someone could help me!

Best

<script type="text/javascript">
      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(52.5200066, 13.404954);
        var mapOptions = {
          zoom: 6,
          scrollwheel: false,
          navigationControl: false,
          mapTypeControl: false,
          scaleControl: false,
          draggable: false,
          zoomControl: true,
          zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.LEFT_CENTER
         },
          streetViewControl:false,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: [
  {
    "featureType": "administrative.country",
    "elementType": "geometry",
    "stylers": [
      { "weight": 1.2 },
      { "color": "#dd4b39" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "administrative.country",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "visibility": "on" }
    ]
  }
]
}

        map = new google.maps.Map(document.getElementById('user-map-canvas'), mapOptions);
      }

       function showAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Adresse konnte aus folgendem Grund nicht gefunden werden: " + status);
      }



      google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
    window.location='/freiwillige/?s=<?php echo $country ?>'; // URL to Link Marker to (i.e Google Places Listing)
});
    });

  }      

  jQuery(document).ready( function() { initialize(); showAddress('<?php echo $address ?>'); } );
    </script>

score 0 · Answer 1 · edited May 23 '17 at 10:32

You should be able to place panby at any point after the instantiation of the map, so in the example you have given:

map = new google.maps.Map(document.getElementById('user-map-canvas'), mapOptions);
map.panby(x, y);

Should work perfectly.

Note that this function pans the map, it doesn't move the marker relative to the tiles, I presume this is what you intended?

Edit You should be able to place the call at any point in execution. So for example to offset the map slightly after your geocode request you could do:

if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
    map.panby(x, y);
  }

edit Ok so I've modified your original code with the changes I've mentioned. Try this:

<script type="text/javascript">
    var geocoder;
    var map;
    function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        zoom: 6,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl:false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
        {
            "featureType": "administrative.country",
            "elementType": "geometry",
            "stylers": [
            { "weight": 1.2 },
            { "color": "#dd4b39" }
            ]
        },{
            "featureType": "administrative",
            "stylers": [
            { "visibility": "simplified" }
            ]
        },{
            "featureType": "administrative.country",
            "stylers": [
            { "visibility": "on" }
            ]
        },{
            "featureType": "administrative.locality",
            "stylers": [
            { "visibility": "on" }
            ]
        }
        ]
    }

    map = new google.maps.Map(document.getElementById('user-map-canvas'), mapOptions);   
    }

    function showAddress(address) {
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
                map.setCenter(results[0].geometry.location);
                map.panby(x, y);
            } 
            else 
            {
                alert("Adresse konnte aus folgendem Grund nicht gefunden werden: " + status);
            }



            google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
                window.location='/freiwillige/?s=<?php echo $country ?>'; // URL to Link Marker to (i.e Google Places Listing)
            });
        });

    }      

    jQuery(document).ready( function() { initialize(); showAddress('<?php echo $address ?>'); } );
</script>

I've removed the original centering of the map (and the variable latlng, you don't use it anywhere else) and then centered and offset after the geocode request completes. Fingers. Crossed.

Edit See answer Here if panby still isn't working, but I can't see any issues with the code.

Wow! That brought me a big step further! Thanks... :) But now the map centers at the point defined here: `var latlng = new google.maps.LatLng(52.5200066, 13.404954);` instead of the marker. Is there a way to fix that, too. — Philipp, Dec 18 '13 at 15:01
Do you want the map to center to the marker on initialize or after the geocode request? — ChrisSwires, Dec 18 '13 at 15:09
Well, I just want to reach that it centers to the marker when loading the page but the marker should be a bit to the right. ;) Thank you very much, this is going to make me crazy! — Philipp, Dec 18 '13 at 15:24
See the second edit above, any help there? Sorry I wasn't clear on what you were trying to do. — ChrisSwires, Dec 18 '13 at 15:28
Ok I tried it and went lost. First of all thank you again for your help. But that doesn't seem to work. I'm not sure about what to move where. — Philipp, Dec 18 '13 at 15:43
Ok I've edited the complete code so you can see what I meant. — ChrisSwires, Dec 18 '13 at 15:51
Great! But sadly it's still the same. The marker gets centered to the middle of the map. And I edited the x and y of cause... :( — Philipp, Dec 18 '13 at 16:05
How far are you panning (with x and y), see edit for similar question with more complex solution. — ChrisSwires, Dec 19 '13 at 11:23

map.panby(x,y) where to place in google map code

1 Answers1