Google maps removing controls

前端 未结 4 1074
梦谈多话
梦谈多话 2020-12-15 07:18

I am attempting to create a Google map of my company location. I used the link button on the Google maps page. Everything\'s fine, but when I shrink the map to 200 x 200 all

相关标签:
4条回答
  • 2020-12-15 07:37

    There is not a parameter to hide the controls using IFRAME, look on the following link to see the possible parameters:

    http://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

    If you do not want to use the API, you can use CSS to hide the edges of the map:

    CSS:

    .mapaThumb { position:relative; }
    .mapaThumb iframe{ width:200px; height:240px; margin-top:-40px; margin-left:-10px; }
    .mapaThumb .mapaItem{ overflow:hidden; height:150px; }
    

    HTML:

    <div class="mapaThumb">
        <div class="mapaItem">
            <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com.br/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=brazil&amp;aq=&amp;sll=-21.086832,-42.409844&amp;sspn=0.895645,1.674042&amp;ie=UTF8&amp;hq=&amp;hnear=Rep%C3%BAblica+Federativa+do+Brasil&amp;t=m&amp;z=4&amp;ll=-14.235004,-51.92528&amp;output=embed"></iframe>
        </div>
    </div>
    

    It is not the most correct, but it works! Old trick taught by a Chinese sage.

    0 讨论(0)
  • 2020-12-15 07:38

    I don't believe it is possible to hide controls when embedding the map. You will need to create a map in javascript by using Google Maps API - in lines of the following:

    var mapContainer = document.getElementById('mapContainer');
    var mapOptions = {
        panControl: false,
        zoomControl: false,
        scaleControl: false,
    };
    var map = new google.maps.Map(mapContainer, mapOptions);
    
    0 讨论(0)
  • 2020-12-15 07:44

    Just style your Google map here, click on "Generate Code" and embed it in the <body> of your website.

    0 讨论(0)
  • 2020-12-15 07:55

    To customize the interface, I believe you have to delve into the Google Maps API.

    Using the Google Maps API, you can set disableDefaultUI to true.

    HTML File:

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="map.js"></script>
    </head>
    <body>
        <div id="map" style="width:200px; height:200px;" />
    </body>
    </html>
    

    JavaScript file:

    window.onload = function() {
        var myOptions = {
            center: new google.maps.LatLng(40.744556,-73.987378),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
    
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
    }
    
    0 讨论(0)
提交回复
热议问题