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
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&source=s_q&hl=pt-BR&geocode=&q=brazil&aq=&sll=-21.086832,-42.409844&sspn=0.895645,1.674042&ie=UTF8&hq=&hnear=Rep%C3%BAblica+Federativa+do+Brasil&t=m&z=4&ll=-14.235004,-51.92528&output=embed"></iframe>
</div>
</div>
It is not the most correct, but it works! Old trick taught by a Chinese sage.
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);
Just style your Google map here, click on "Generate Code" and embed it in the <body>
of your website.
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);
}