javascript - How do I offset a Google Map Marker? -
i've read few posts on here regarding same thing. have code used, i'm not sure if i'm using correctly. 1 thing didn't how code used other javascript google maps controls parameters, styling, etc.
here's snippet other thread:
function offsetcenter(latlng, offsetx, offsety) { // latlng apparent centre-point // offsetx distance want point move right, in pixels // offsety distance want point move upwards, in pixels // offset can negative // offsetx , offsety both optional var scale = math.pow(2, map.getzoom()); var worldcoordinatecenter = map.getprojection().fromlatlngtopoint(latlng); var pixeloffset = new google.maps.point((offsetx/scale) || 0,(offsety/scale) ||0) var worldcoordinatenewcenter = new google.maps.point( worldcoordinatecenter.x - pixeloffset.x, worldcoordinatecenter.y + pixeloffset.y ); var newcenter = map.getprojection().frompointtolatlng(worldcoordinatenewcenter); map.setcenter(newcenter); } and current javascript map:
var latlng = new google.maps.latlng(0, 0); var myoptions = { zoom: 16, center: latlng, scrollwheel: false, disabledefaultui: true, draggable: false, keyboardshortcuts: false, disabledoubleclickzoom: false, noclear: true, scalecontrol: false, pancontrol: false, streetviewcontrol: false, styles: [{"featuretype":"landscape","stylers":[{"hue":"#ffbb00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featuretype":"road.highway","stylers":[{"hue":"#ffc200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featuretype":"road.arterial","stylers":[{"hue":"#ff0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featuretype":"road.local","stylers":[{"hue":"#ff0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featuretype":"water","stylers":[{"hue":"#0078ff"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featuretype":"poi","stylers":[{"hue":"#00ff6a"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}], maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map"), myoptions); var geocoder_map = new google.maps.geocoder(); var address = '11681 king fahd road, al mohammadiyah, 4047, riyadh, riyadh province saudi arabia'; geocoder_map.geocode({ 'address': address }, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var image = "../wp-content/themes/rawafid-systems/assets/img/pin.svg"; var marker = new google.maps.marker({ map: map, icon: image, position: map.getcenter() }); var contentstring = 'tagline'; var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); } else { alert("geocode not successful following reason: " + status); } }); how incorporate snippet other article? right can see here map marker right in center. i'd offset appears more right it's not hidden.
call offsetcenter function after set map center (in geocoder callback function).
code snippet:
var map; function initialize() { var latlng = new google.maps.latlng(0, 0); var myoptions = { zoom: 16, center: latlng, scrollwheel: false, disabledefaultui: true, draggable: false, keyboardshortcuts: false, disabledoubleclickzoom: false, noclear: true, scalecontrol: false, pancontrol: false, streetviewcontrol: false, styles: [{ "featuretype": "landscape", "stylers": [{ "hue": "#ffbb00" }, { "saturation": 43.400000000000006 }, { "lightness": 37.599999999999994 }, { "gamma": 1 }] }, { "featuretype": "road.highway", "stylers": [{ "hue": "#ffc200" }, { "saturation": -61.8 }, { "lightness": 45.599999999999994 }, { "gamma": 1 }] }, { "featuretype": "road.arterial", "stylers": [{ "hue": "#ff0300" }, { "saturation": -100 }, { "lightness": 51.19999999999999 }, { "gamma": 1 }] }, { "featuretype": "road.local", "stylers": [{ "hue": "#ff0300" }, { "saturation": -100 }, { "lightness": 52 }, { "gamma": 1 }] }, { "featuretype": "water", "stylers": [{ "hue": "#0078ff" }, { "saturation": -13.200000000000003 }, { "lightness": 2.4000000000000057 }, { "gamma": 1 }] }, { "featuretype": "poi", "stylers": [{ "hue": "#00ff6a" }, { "saturation": -1.0989010989011234 }, { "lightness": 11.200000000000017 }, { "gamma": 1 }] }], maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map"), myoptions); var geocoder_map = new google.maps.geocoder(); var address = '11681 king fahd road, al mohammadiyah, 4047, riyadh, riyadh province saudi arabia'; geocoder_map.geocode({ 'address': address }, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var image = "http://maps.google.com/mapfiles/ms/micons/blue.png"; var marker = new google.maps.marker({ map: map, icon: image, position: map.getcenter() }); var contentstring = 'tagline'; var infowindow = new google.maps.infowindow({ content: contentstring }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); // move center 200 pixels right. offsetcenter(map.getcenter(), 200, 0) } else { alert("geocode not successful following reason: " + status); } }); // create div hold control , call centercontrol() // constructor passing in div. var centercontroldiv = document.createelement('div'); var centercontrol = new centercontrol(centercontroldiv, map); centercontroldiv.index = 1; map.controls[google.maps.controlposition.left_center].push(centercontroldiv); } google.maps.event.adddomlistener(window, "load", initialize); function offsetcenter(latlng, offsetx, offsety) { // latlng apparent centre-point // offsetx distance want point move right, in pixels // offsety distance want point move upwards, in pixels // offset can negative // offsetx , offsety both optional var scale = math.pow(2, map.getzoom()); var worldcoordinatecenter = map.getprojection().fromlatlngtopoint(latlng); var pixeloffset = new google.maps.point((offsetx / scale) || 0, (offsety / scale) || 0) var worldcoordinatenewcenter = new google.maps.point( worldcoordinatecenter.x - pixeloffset.x, worldcoordinatecenter.y + pixeloffset.y ); var newcenter = map.getprojection().frompointtolatlng(worldcoordinatenewcenter); map.setcenter(newcenter); } /** * centercontrol adds control map recenters map on * chicago. * constructor takes control div argument. * @constructor */ function centercontrol(controldiv, map) { // set css control border. var controlui = document.createelement('div'); controlui.setattribute("style", "display:block;width:400px;background-color:white;height:100px; border: 1px black solid;"); controlui.style.width = '400px'; controlui.title = 'click recenter map'; controldiv.appendchild(controlui); // set css control interior. var controltext = document.createelement('div'); controltext.style.color = 'rgb(25,25,25)'; controltext.style.fontfamily = 'roboto,arial,sans-serif'; controltext.style.fontsize = '16px'; controltext.style.lineheight = '38px'; controltext.style.paddingleft = '5px'; controltext.style.paddingright = '5px'; controltext.innerhtml = 'test text'; controlui.appendchild(controltext); // setup click event listeners: set map chicago. controlui.addeventlistener('click', function() { map.setcenter(chicago); }); }html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>
Comments
Post a Comment