• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Centering a Google Map


wac

Senior Member
#1
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: http://thebig.co/contact/

Any ideas?
 

wac

Senior Member
#3
Like this (JS)

Code:
function googleMaps() {

    $('.js-sleek-gmap:not(.processed)').each(function(e){
        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,
            null,
            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() {
                infowindow.open(map,marker);
            });
        }

        $el.addClass('processed');
    });

}

$(document).ready( googleMaps );
$(document).on( 'sleek:ajaxPageLoad', googleMaps );
PHP

PHP:
if( !function_exists( 'bigdot_gmap' ) ){
function sleek_gmap($atts, $content = null) {

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


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

    wp_enqueue_script('sleek_google_maps');

    $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>';

    return $output;
}
}

add_shortcode('gmap', 'bigdot_gmap');
Shortcode

Code:
[gmap lat="51.901599" lng="-2.07784" zoom="17" pin="http://thebig.co/map/images/logo.png" scrollable="false" height="400"]We're here![/gmap]
 

Paul Murray

Moderator
Staff member
#4
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?