Wie versetze ich einen Google Map Marker?

Question

Ich habe ein paar Posts über die gleiche Sache hier gelesen. Ich habe den Code verwendet, aber ich bin mir nicht sicher, ob ich es richtig verwende. Das einzige, was sie nicht wirklich war sagen, wie würde dieser Code mit dem anderen Javascript für Google Maps verwendet werden, die die Parameter steuert, Styling etc.

Hier ist der Ausschnitt aus der anderen thread:

function offsetCenter(latlng, offsetx, offsety) { 

    // latlng is the apparent centre-point 
    // offsetx is the distance you want that point to move to the right, in pixels 
    // offsety is the distance you want that point to move upwards, in pixels 
    // offset can be negative 
    // offsetx and offsety are 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); 

} 

Und das ist meine aktuelle Javascript für meine Karte:

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 was not successful for the following reason: " + status); 
     } 
    }); 

Wie kann ich den Ausschnitt aus den anderen Artikeln integrieren? Jetzt können Sie sehen, here, dass die Kartenmarkierung in der Mitte ist. Ich möchte es ausgleichen, so dass es mehr nach rechts erscheint, also ist es nicht versteckt.

Answer 1

Rufen Sie die offsetCenter Funktion, nachdem Sie die Karte Zentrum (in der Geocoder Callback-Funktion) eingestellt.

proof of concept fiddle

Code-Schnipsel:

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 to the right. 
 
     offsetCenter(map.getCenter(), 200, 0) 
 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 
    // Create the DIV to hold the control and call the CenterControl() 
 
    // constructor passing in this 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 is the apparent centre-point 
 
    // offsetx is the distance you want that point to move to the right, in pixels 
 
    // offsety is the distance you want that point to move upwards, in pixels 
 
    // offset can be negative 
 
    // offsetx and offsety are 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); 
 

 
    } 
 
    /** 
 
    * The CenterControl adds a control to the map that recenters the map on 
 
    * Chicago. 
 
    * This constructor takes the control DIV as an argument. 
 
    * @constructor 
 
    */ 
 

 
function CenterControl(controlDiv, map) { 
 

 
    // Set CSS for the 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 to recenter the map'; 
 
    controlDiv.appendChild(controlUI); 
 

 
    // Set CSS for the 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 the click event listeners: simply set the map to 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>