Google maps marker slightly off center

Hi ,

Having just one little problem with google maps. When ever i search a location the marker is always a slightly off center. Take a look at the gif to understand my problem more. As you can see when a search for location has been entered the location comes up but the marker is not placed on the correct location.
when using this html code by it self it works. but when using this inside a template in wordpress i’m getting the problem where the marker is not centered.

even on codepen the marker is working and is centered back to position when a location has been searched, but using the same code in a template with wordpress i’m getting the above problem i explained. could this be a css problem or a interference with the template(newsmag). The white address info box is showing correctly, the marker should be beneath that Address box but as you can see in the gif the marker slightly goes to a different location.
Tried some things in css and i think im sure this is related to css. in firefox inspect tool when playing around with the position and overflow settings sometimes the marker will stay in place but getting other style problems.

any help would be great. I put everything on codepen hope this is a simple solution.

Thanks in advance

Still waiting for a solution.someone could help me out with this

It is the weekend, so the forums are a bit quiet, be patient. :smiley:

In the Codepen it appears to be OK, with the marker where the label points to. Not like in your gif, where the marker is behind the label. :confused:

Yes and that’s my main problem. Marker is not centered like the label

Finally fixed the problem. It was the label all this time. removed this 2 lines in the eqibla.js file and everything is working fine.

remove these two lines.

        **//if (!hideInfo && this.getMapType() != 'e' && place.address != '' && this.map.getSize().height > 340)**
**            //this.map.openInfoWindowHtml(this.home, '<h4>Address:</h4><p>'+ place.address+ '</p>');**
// show address on map
Qibla.showAddressOnMap = function(response, hideInfo) {
    if (!response || response.Status.code != 200) {
        if (!this.map.isLoaded())
            this.map.setCenter(this.home, 1*this.mapZoom);
        else
            alert('Adres niet gevonden');
    }
    else {
        var place = response.Placemark[0];
        this.home = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
        var zoom = 4+ parseInt(1.5* place.AddressDetails.Accuracy);
        zoom = Math.min(zoom, this.map.getCurrentMapType().getMaximumResolution());
        this.map.setCenter(this.home, zoom);
        this.redraw();
        **//if (!hideInfo && this.getMapType() != 'e' && place.address != '' && this.map.getSize().height > 340)**
**            //this.map.openInfoWindowHtml(this.home, '<h4>Address:</h4><p>'+ place.address+ '</p>');**
    }
}
5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.