javascript - Google Maps API: Move map center to a position on my page? -

-

maybe there solution this:

i'm using gmap api embed map undernaeth overlay have on top of map. overlay has little arrow on right side , want map marker positioned @ point (or few pixels beside it)

i know possible use gmaps infowindow, have way.

so i'm able use $("#arrow").offset() in order position on page, don't know how move or pan map center pixel-destination.

window.onload = function() {     var myoptions = {         center: new google.maps.latlng(47.259998, 11.398032),         zoom: 17,         maptypeid: google.maps.maptypeid.roadmap,         disabledefaultui: true     };      var map = new google.maps.map(document.getelementbyid("map"), myoptions);      var marker = new google.maps.marker({         position: new google.maps.latlng(47.260071, 11.404705),         map: map,     });      console.log( $("#arrow").offset().top ); }

enter image description here

update:

this code have in page-template right now. have on last problem though. if page has width of lets 1440px position of marker relative little arrow works fine: https://goo.gl/u489nd resize page smaller width , load page again marker behind overlay , not positioned relative little arrow. https://goo.gl/k4rpyv

google.maps.event.adddomlistener(window, 'load', initmap);  window.onresize = function() {     positionmap(); }  function initmap() {     var myoptions = {         center: new google.maps.latlng(47.260071, 11.404705),         zoom: 17,         maptypeid: google.maps.maptypeid.roadmap,         disabledefaultui: true,         draggable: false,         maptypecontrol: false,         zoomcontrol: false,         scalecontrol: false,         scrollwheel: false     };      var map = new google.maps.map(document.getelementbyid("map"), myoptions);      var marker = new google.maps.marker({         position: new google.maps.latlng(47.260071, 11.404705),         map: map,         title: 'Österreichisches rotes kreuz innsbruck'     }); }  function positionmap() {     var arrowpos = $("#map-center").position();     console.log(arrowpos);      var getpixeloffset = function(map, marker) {         // calculate marker position in pixels form upper left corner         var scale = math.pow(2, map.getzoom());         var nw = new google.maps.latlng(             map.getbounds().getnortheast().lat(),             map.getbounds().getsouthwest().lng()         );         var worldcoordinatenw = map.getprojection().fromlatlngtopoint(nw);         var worldcoordinate = map.getprojection().fromlatlngtopoint(marker.getposition());         var pixeloffset = new google.maps.point(             math.floor((worldcoordinate.x - worldcoordinatenw.x) * scale),             math.floor((worldcoordinate.y - worldcoordinatenw.y) * scale)         );         return pixeloffset;     };      // wait until map initialized     var listener = google.maps.event.addlistener(map, "idle", function() {          var pixeloffset = getpixeloffset(map, marker);          // pan         map.panby( math.abs( pixeloffset.x - ( arrowpos.left ) - 150 ),                  math.abs( pixeloffset.y - ( arrowpos.top ) ) - 50 );          google.maps.event.removelistener(listener);      }); }

one approach use map.getprojection().fromlatlngtopoint() find pixel position of marker inside map, subtract $("#arrow").offset() marker position , call map.panby() move marker calculated difference.

here's demo in marker moved sample position { top: 50, left: 100 }:

var myoptions = {          center: new google.maps.latlng(47.259998, 11.398032),          zoom: 17,          maptypeid: google.maps.maptypeid.roadmap,          disabledefaultui: true      };    var map = new google.maps.map(document.getelementbyid("map"), myoptions);    var marker = new google.maps.marker({          position: new google.maps.latlng(47.260071, 11.404705),          map: map,          title: 'hello world!'      });      // replace call $("#arrow").offset()  var arrowpos = { top: 50, left: 100 };    var getpixeloffset = function(map, marker) {      // calculate marker position in pixels form upper left corner      var scale = math.pow(2, map.getzoom());      var nw = new google.maps.latlng(          map.getbounds().getnortheast().lat(),          map.getbounds().getsouthwest().lng()      );      var worldcoordinatenw = map.getprojection().fromlatlngtopoint(nw);      var worldcoordinate = map.getprojection().fromlatlngtopoint(marker.getposition());      var pixeloffset = new google.maps.point(          math.floor((worldcoordinate.x - worldcoordinatenw.x) * scale),          math.floor((worldcoordinate.y - worldcoordinatenw.y) * scale)      );      return pixeloffset;  };    // wait until map initialized  var listener = google.maps.event.addlistener(map, "idle", function() {       var pixeloffset = getpixeloffset(map, marker);            // pan      map.panby(math.abs(pixeloffset.x - arrowpos.left),               math.abs(pixeloffset.y - arrowpos.top));            google.maps.event.removelistener(listener);   });
html,  body,  #map {      display: block;      width: 100%;      height: 100%;  }    #map {      background: #58b;  }
<script src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>  <div id="map"></div>

also, note have when map loaded, i.e. in idle event handler. otherwise (that's experienced) getprojection() method might unavailable.

references:


Comments

Post a Comment

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall...
Read more

java - UML - How would you draw a try catch in a sequence diagram? -

-
Image
is there standard way of drawing try catch sequence diagrams? i've made attempt based on this feel end result doesn't feel right. code diagram based around: public static void save () { try { filehandle filehandle = gdx.files.external(file); filehandle.writestring(boolean.tostring(constantshandler.soundenabled)+"\n", false); (int = 0; < 5; i++) { filehandle.writestring(integer.tostring(constantshandler.highscores[i])+"\n", true); } } catch (throwable e) { } } my attempt note: know still need add loop. that's ok. fragments meant show conditional control flow in sequence diagram. superstructures puts limitations on use of fragments (see pp. 467 of ss2.1.1). should use critical region try part above. , option catch . however, keep telling can take quite freedom in using uml. it's language , such changes in life time. long reader ge...
Read more

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co...
Read more