Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Centering a Google Map

Discussion in 'Website Design Forum:' started by wac, Mar 12, 2016.

  1. wac

    wac Senior Member

    Usually when implementing a custom Google map you can define two sets of lat and long, one for the marker and one for the center of the map.

    On this page, I have implemented the map via PHP and can only seem to set the marker position with the map automatically centering on that, but as you'll see its not quite centered:

    Any ideas?
  2. bigdave

    bigdave Moderator Staff Member

    What does your code look like?
  3. wac

    wac Senior Member

    Like this (JS)

    function googleMaps() {
            var $el = $(this);
            var el  = $(this)[0];
            var lat = parseFloat( $el.attr('data-lat') );
            var lng = parseFloat( $el.attr('data-lng') );
            var zoom= parseFloat( $el.attr('data-zoom') );
            var pin = $el.attr('data-pin');
            var scrollable     = $el.attr('data-scrollable') == 'true' ? true : false ;
            var content     = $el.html();
            var style = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}];
            var myLatLng = new google.maps.LatLng( lat, lng );
            var mapOptions = {
                zoom: zoom,
                center: myLatLng,
                scrollwheel : scrollable,
                draggable : scrollable,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: style
            var map = new google.maps.Map( el, mapOptions );
            var marker_image = new google.maps.MarkerImage(pin,
                new google.maps.Point(0,0),
                new google.maps.Point(12, 22)
            var marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: myLatLng,
                map: map,
                icon: marker_image
            if( content ) {
                var infowindow = new google.maps.InfoWindow({
                    content: content,
                    maxWidth: 300
                google.maps.event.addListener(marker, 'click', function() {
    $(document).ready( googleMaps );
    $(document).on( 'sleek:ajaxPageLoad', googleMaps );

    if( !function_exists'bigdot_gmap' ) ){
    sleek_gmap($atts$content null) {

    extractshortcode_atts( array(
    'lat' => '0'
    ,'lng' => '0'
    ,'zoom' => '14'
    ,'pin' => THEME_IMG_URI.'/gmap_pin.png'
    ,'scrollable' => 'false'
    ,'height' => ''
    ), $atts ) );

    $pin == ''){
    $pin THEME_IMG_URI.'/gmap_pin.png';
    $scrollable == ''){
    $scrollable 'false';
    $zoom == ''){
    $zoom '14';


    $output '<div class="bigdot-gmap sleek-embed-container js-sleek-gmap"';
    $output .= ' data-lat="'.$lat.'"';
    $output .= ' data-lng="'.$lng.'"';
    $output .= ' data-zoom="'.$zoom.'"';
    $output .= ' data-pin="'.$pin.'"';
    $output .= ' data-scrollable="'.$scrollable.'"';
    $output .= ' style="padding-bottom:'.$height.'px;"';
    $output .= '>'.$content.'</div>';



    [gmap lat="51.901599" lng="-2.07784" zoom="17" pin="" scrollable="false" height="400"]We're here![/gmap]
  4. Paul Murray

    Paul Murray Moderator Staff Member

    Might be a little late with this, you could have update the site and solved the issue since Saturday but I'll reply anyway.

    What I'm seeing is a map centered on the marker, but the container div itself is not central to the screen because the left sidebar is pushing it to the right. Is that the issue you're having?
    bigdave likes this.

Share This Page