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: http://thebig.co/contact/

    Any ideas?
     
  2. bigdave

    bigdave Moderator Staff Member

    What does your code look like?
     
  3. wac

    wac Senior Member

    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) {

        
    extractshortcode_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]
     
  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