Google-maps – How to offset the center of a Google maps (API v3) in pixels

google mapsgoogle-maps-api-3

I was wondering if it is possible to offset the center of a map in Google maps api v3. I would like to control this offset in pixels, since by lat and lng seems wrong and very difficult to predict.

I just need to place a marker, and then offset the center by 250px so I can place some other content in the middle of the map.

Hope someone can help!

Best Answer

Found this question when researching and thought I should provide an answer:

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

If your Google maps variable isn't map use the following call function reference:

function map_recenter(map,latlng,offsetx,offsety) { ...

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Push markers in the 'markerArray' before calling the following:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Call the clearOverlays(); or map.clearOverlays(); function wherever required.

That's it!!

Javascript – Google Maps API v3: How to dynamically change the marker icon

Call the marker.setIcon('newImage.png')... Look here for the docs.

Are you asking about the actual way to do it? You could just create each div, and a add a mouseover and mouseout listener that would change the icon and back for the markers.

Best Answer

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Javascript – Google Maps API v3: How to dynamically change the marker icon

Related Topic