WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマAVALONのGoogleMapのサイズを変更する方法

TCDテーマAVALONの固定ページにGoogleMapを埋め込んだ際に、「もう少しこの部分まで表示したい」なんてことはないでしょうか?

今回は表示される地図の縮尺を変更するカスタマイズ方法について解説していきます。
下記のようにカスタマイズ修正していただくと小さくすることができます。

※カスタマイズをされる場合は必ずバックアップしてからおこなってください。

1.カスタマイズするCSSを表示させる

管理画面から【外観】にマウスをあてていただき、【テーマの編集】ボタンをクリックしていただきます。

次に画面を右側に【template_access.php】がありますのでクリックして下さい。

2.下記コードを編集します。

<修正コード>


<script type="text/javascript">
                    google.maps.event.addDomListener(window, 'load', function(){
                        var geocoder = new google.maps.Geocoder();
                        var disabled = true ? false : true;
                        var draggable = true;
                        geocoder.geocode({'address':'<?php echo
esc_attr($type6_map_addr); ?>'}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK){
                                var mapOptions = {
                                    draggable:
jQuery(document).width() > 480 && draggable == true ? true : false,
                                    center: results[0].geometry.location,
                                    zoom: 18,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                                    scrollwheel: false,
                                    disableDefaultUI: disabled,
                                    disableDoubleClickZoom: disabled,
                                    styles: []
                                };
                               

↓↓↓↓
<修正箇所>

 zoom: 18

18の数字を小さくすると縮小され、大きくすると拡大します。

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。