Is it possible to disable map controls by adding some variables to the Google Maps embed code?
no you can't, but if you use the javascript api you can do this:
map = new google.maps.Map(document.getElementById("map_canvas"), {
panControl: false,
zoomControl: false,
scaleControl: false,
});
This can be done in one step in V3:
Add this to your mapOptions:
disableDefaultUI: true
That's the 8 stepts to can create a static map like this map of Berlin without controls:
http://maps.googleapis.com/maps/api/staticmap?center=52.569916,13.408571&zoom=8&format=png&sensor=false&size=300x200&maptype=roadmap
Here the 8 steps
Go to http://gmaps-samples-v3.googlecode.com/svn-history/r328/trunk/styledmaps/wizard/index.html
Type in your address in the top right corner
Now you can still style and zoom a bit
Click on the "Static Map"
Copy the Link,
Paste it in the address bar
Play around with the parameters (e.g. size)
Instert the ready image on your page
It would seem that google has implemented a tiered pricing model for the maps that are using the api, embed maps have unlimited uses while dynamic maps don't. The selected accepted answer, while still accurate, is only valid if you are willing to setup a paid account. For map implementation with more control that won't cost as much (if anything) I recommend map-box.
https://www.mapbox.com/pricing/
I don't think you can disable map controls using the embedded code in a clean way.
You could make them disappear via css if you find the class or id if the controls.
This is not a good solution because in the feature the code might break.
The best solution is to make a custom map using the javascript api v3.
Related
I am using google map api where there is a requirement to add a pan control inside my map however after setting panControl: true.I am not able to see the pan control anywhere in map. Please see this to understand the issue Google Map API Demo
I am expecting a pan control similar to highlighted in below question.
Pan control not visible
As of version 3.22 the panControl has been depreciated and can no longer be used.
It is not listed on the googleAPI controls page and the release notes confirm this View here.
I Use Leaflet Map Plugin. i Write this code for create and load google map tiles in LeafLet
var map = L.map('map').setView([31.2744015, 48.7251283], 18);
// load a tile layer
//Satellite:
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
this code work fine. But I Want Load another google Map option in this plugin Like 3D View map
But will this be done?
thanks for help me.
Two things:
Loading map tiles from Google using just a L.TileLayer contravenes the terms&conditions of Google Maps (the part about "accessing the content only through the Google Maps API"). Do not be surprised if Google gets angry at that.
As pointed out in the answers to the question «Leaflet Map API with Google Satellite Layer» , look in the Leaflet plugins list. In particular, GoogleMutant might be of interest.
As of now, Leaflet is able to display 2D maps only. There are no plans to make it display oblique imagery, or provide tilt capabilities.
If you need these features, you might want to have a look at other web mapping libraries, such as https://www.mapbox.com/mapbox-gl-js/api/ or https://cesiumjs.org/. These can handle more degrees of camera freedom, and some degree of terrain elevation display.
https://labs.mapbox.com/bites/00093/
pls see the source code of it , as
window.setInterval(function(){
$('.rotating').attr('style','-webkit-transform:rotateZ('+angle+'deg);-moz-transform:rotateZ('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
if ($('.rotating').length>0) $('.pivotmarker').attr('style','-webkit-transform: rotateY('+angle+'deg);-moz-transform: rotateY('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
angle=angle*-1;
},1500);
may it help
On the recently updated google maps there is now a Satellite / Map switcher in the bottom left that allows a user to switch between the two. But it also shows a preview of what the map would look like.
When I am using the Google Maps API, how do I enable this?
You cannot enable the little map preview in Google Maps JS API v3. You have only limited control over MapTypeControl. When creating a new map, you can adjust controls, disable them, etc:
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: position,
zoom: zoom,
mapTypeControl:true,
mapTypeControlOptions:{
mapTypeIds:[google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN],
position: google.maps.ControlPosition.LEFT_TOP,
style: google.maps.MapTypeControlStyle.DEFAULT
}
});
But you cannot set it to display the little preview. If you set MapTypeControlStyle to DEFAULT according to docs, what you will see on the map depends on map size and other factors, so it's possible on some maps on some platforms you will see some preview, but it's not guaranteed:
When the DEFAULT control is shown, it will vary according to window
size and other factors. The DEFAULT control may change in future
versions of the API.
The other two options, DROPDOWN and HORIZONTAL_BAR is probably not what you are looking for.
Nevertheless, if you really want to display the little previews, just disable the default controls (mapTypeControl: false) and create your own Map Type Controls. Example on how to create your own controls is here. You will just create your own preview button using js/css/html and when user clicks it you will just set new map style: map.setMapTypeId(mapTypeId:MapTypeId). Since the button is your own creation, you have full control over it, you can control the preview icon, add hover effects, anything..
I'm fairly new to working with Google Maps API. When embedding a map you get the place and a white box in the top right hand corner with a little information on the place. However I want to use the JavaScript API and want to know is there anyway to replicate this with the JavaScript API and not the iframe embed.
Thanks.
Basically to display the information you would need to use the infoWindow, yes. You can attach an infoWindow to either a marker or directly to map co-ordinates. In depth documentation about infoWindow and detailed references can be found here.
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).