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 ); } 
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