-1

I have a full page map, and what I would like to do is fix a polygon/rectangle over a portion of the map like such, so that the polygon will remain in the same place even if, say, the map was dragged. Then, I would like to set the center of the polygon to whatever the search query might be. Here is another image to illustrate what I mean. Unfortunately, from the documentation it seems as if you can only create polygons in another layer that remain attached, so to speak, to specific tiles on the base map. In addition to that, aside from setting its bounds, the documentation does not list any methods to set the center of a polygon.

Thus I have a couple of questions:

  1. Is it even possible to fix a polygon/rectangle on the map, not in relation to but, independent of the positions of map tiles in the base layer?
  2. Is it possible to set the center of a polygon/rectangle to a LatLng Object (or something similar), and then use this orientation to position the map as a whole?

P.S. If you're going to downvote my question, at least state why and give me a chance to address whatever your issue with the question might be...

gatekeeper01
  • 21
  • 7

2 Answers2

0

I would recommend absolute positioning a div like this

<div id="mapdiv">
<div id="rect"></div>
</div>

and the css

#mapdiv {
  position:relative;
  width:600px;
  height:400px;
  background-color:#333;
}
#rect {
  position:absolute;
  top: 10%;
  left: 10%;
  width:80%;
  height:80%;
  background-color:#FFF;
}

as for using the co-ordinates and polys through the map. I have some experience with routes and such and would have to say it possible to get the shape but you would require a map refresh each time and for absolute positioning it. Not sure if thats possible

Xanfar
  • 124
  • 6
  • Yes, sorry, maybe I wasn't clear enough. The polygon/rectangle, I imagine, must be part of or belong to the Google Maps API (in order to retrieve geo coordinates and what not) because I plan on making the center of the polygon/rectangle the center of the map while allowing the map to be full page. Basically what I'm wanting to do is manipulate the position of the "center" of the map. Thanks for your concern nonetheless! @DevFX – gatekeeper01 Oct 18 '16 at 22:20
  • I know it's probably possible to position a polygon absolutely in a seemingly fixed position over the map, but the possibly intensive part is calculating the map bounds in relation to the window dimensions, and then deducting X and Y from the map bounds to create the bounds for the polygon. I'm hoping there's an easier way, however. What do you think? – gatekeeper01 Oct 18 '16 at 22:34
0

Sorry for that last answer...misunderstood. Have you tried this plus adding an offset of window width

function polygonCenter(poly) {
    var lowx,
        highx,
        lowy,
        highy,
        lats = [],
        lngs = [],
        vertices = poly.getPath();

    for(var i=0; i<vertices.length; i++) {
      lngs.push(vertices.getAt(i).lng());
      lats.push(vertices.getAt(i).lat());
    }

    lats.sort();
    lngs.sort();
    lowx = lats[0];
    highx = lats[vertices.length - 1];
    lowy = lngs[0];
    highy = lngs[vertices.length - 1];
    center_x = lowx + ((highx-lowx) / 2);
    center_y = lowy + ((highy - lowy) / 2);
    return (new google.maps.LatLng(center_x, center_y));
  }

Again as for absolute positioning it after that I am still not quite certain Might be a good starting point tho

Edit: found this link here on stack should actually work without knowing your setup how-do-i-get-google-maps-to-show-a-whole-polygon

Community
  • 1
  • 1
Xanfar
  • 124
  • 6
  • I think I'm just going to start by shifting the map to the right by subtracting N from the latitude coordinates. I'll calculate N by creating a formula that determines the ratio of pixels to degrees of latitude. Then I'll probably just place a new instance of a polygon on the map in a similar fashion. Should work. I just wanted to see if there was a way to reduce the work. – gatekeeper01 Oct 18 '16 at 23:12