Google Maps API - Strange Map "Offset" Behaviour

Google Maps API - Strange Map Offset Behaviour

I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.

Google maps - change cursor to image pick offset

The basic formula to achieve it you'll find at https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates

pixelCoordinate = worldCoordinate * 2zoomLevel

Get the worldCoordinate of the click, calculate the pixelCoordinate, add the offset , calculate the new worldCoordinate and you have the desired position.

You'll need two functions to convert LatLng's to Pixel(and vice versa):

fromLatLngToPoint() and fromPointToLatLng()

sample-function:

  google.maps.event.addListener(map, 'click', function(e){      
       //assume a cursor with a size of 22*40

   var  //define the anchor, the base(top-left) is 0,0
        //bottom middle will be 11,40
       anchor         = new google.maps.Point(11,40),

        //the map-projection, needed to calculate the desired LatLng
       proj           = this.getProjection(),

        //clicked latLng
       pos            = e.latLng;

        //the power of the map-zoom
       power          = Math.pow(2,map.getZoom()),

        //get the world-coordinate
        //will be equal to the pixel-coordinate at zoom 0
       point          = proj.fromLatLngToPoint(pos),

        //calculate the new world-coordinate based on the anchor
       offsetPoint    = new google.maps.Point(
                                        (point.x*power+anchor.x)/power,
                                        (point.y*power+anchor.y)/power
                                       ),
        //convert it back to a LatLng
       offsetPosition = proj.fromPointToLatLng(offsetPoint);

       //done

       new google.maps.Marker({ position:offsetPosition, map:map});
  });

Demo: http://jsfiddle.net/doktormolle/NYh7g/

Google Maps API V3 grey box on one site, works fine on another

It is indeed a CSS issue. Here is the CSS rule that is the culprit:

div {
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}

Line 397 of trained-installers.html

You'll need to modify the rule to only apply to relevant DIVs, not all DIVs.

Is this possible with the Google Maps API to have an interactive map or a continent that you can put pins on?

There's a couple of ways you could do this. Either using

1. Map Styling to only show the continental outlines (http://goo.gl/stXu2)
   or
2. An custom map type to replace the map image with your own: http://goo.gl/fi9uVJ

In either case you probably would also want to use Polygons to render the borders of the country: http://goo.gl/2VLc3S

Weird behavior of GeoPoint and/or android.maps.Projection when panning a MapView at max zoom level

I am also facing this Problem - seems to be a bug in the Android Mapview API - I think the Issue to Star is this one:
http://code.google.com/p/android/issues/detail?id=17387&can=5&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
also a possible workaround which is ugly,but works for is included in the comments - basically you determine the error and adjust the result accordingly

---

Related Topics