I am trying to remove all the controls (zoom, map type drop down, and street view) from my map.
There's a method
map.removeControl(GControl)
but I haven't been able to successfully remove any default ones that I hadn't added myself.
Any tips on remove/clearing all controls from the map?
Have you tried this:
http://code.google.com/apis/maps/documentation/javascript/controls.html#DisablingDefaults
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
You may see this: google map api by w3schools
As you see in the link, this disables all controls:
var mapOptions = {disableDefaultUI: true}
and the bellow is the options to make them enabled or disabled.
var mapOptions = {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
just disableDefaultUI: true
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
disableDefaultUI: true
});
}
I believe you can create a copy of the GMapUIOptions object and then remove the items you don't want to appear.
From http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#MapUIOptions
"Using the GMapUIOptions Object
The GMapUIOptions object contains a set of properties that specify control placement and UI behavior, which you may modify. For a full set of properties, see the GMapUIOptions reference.
Rather than write a GMapUIOptions structure from scratch, you may wish to prepopulate it with the UI behavior available on Google Maps. To do so, use the GMap2.getDefaultUI() method. Once populated, you can modify individual properties to tweak the behavior and initialize the map's UI controls using the GMap2.setUI() method.
The following code retrieves the default UI on a "large" map, removes the GScaleControl and resets the map to use the modified UI.
map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(400,150) } );
map.setCenter(new GLatLng(41.897997,-87.790203), 11);
var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);
"
Related
Ok so here is the file. It was working some days ago. I haven't really changed anything so i do not know why latLng does not work now.
here is my code
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
console.log(map);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event) {
//Drop a new Marker with location Form
create_marker(event.latLng, 'New Marker', true, true, true);
});
when i console.log(event.latLng); it returns an empty object.
console.log(event.latLng.lat());
tried with mousedown listener , it works
Problem: I want to use a google maps v3 terrain map with own styles as an own mapType.
I started with this code:
var mapOptions = {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: styles
};
It shows my terrain with my own styles. Thats okay!
Now, i want too add this to the mapTypeIds
var styledMap = new google.maps.StyledMapType(styles, {
name: "NSW"
});
var mapOptions = {
scrollwheel: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
}
};
var map = new google.maps.Map(map_id[0],
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
The problem is, google maps uses "ROADMAP" for the "StyledMapType" and i've no idea how to change this to "TERRAIN". Is that even possible?
Update:
As you can see, "roadmap" is default. In the main.js from the google maps api there is the line:
k=c.baseMapTypeId||"roadmap"
So, what is the baseMapTypeId? The one, which i set in the mapOptions like:
mapTypeId: google.maps.MapTypeId.TERRAIN
???
May, this helps to solve my Problem.
You can do it this way:
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Name of your style"
});
var myLatlng = new google.maps.LatLng(10, 10);
var map = new google.maps.Map(document.getElementById("map-canvas"), {
scrollwheel: false,
center: myLatlng,
zoom: 10
});
map.mapTypes.set('NSW', styledMap);
var mapTypeControlOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'NSW']
}
};
map.setOptions(mapTypeControlOptions);
Note that the name of your StyledMapType is the name that will be displayed on the map, and the id of your MapStyle that you declare with the set method is what you need to use to reference your map style.
Hope this helps!
JSFiddle demo
Edit:
If you want to apply custom styles over the TERRAIN map style, you could do it by setting the styles of the current map type. You can add a custom control to your map to handle the toggling.
JSFiddle demo
It is possible to set a different base map for StyledMapType.
Note the second argument. You've actually figured this out by yourself, based on your screenshot and updated comment.
new google.maps.StyledMapType(styles, { baseMapTypeId: google.maps.MapTypeId.TERRAIN })
When using the Google Maps API, you can set the position of a control like this.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I would like to set the position depending on user screen. I have a varible isMobile and tried to configure the position like this:
position: (isMobile)?google.maps.ControlPosition.BOTTOM_CENTER:position: google.maps.ControlPosition.TOP_CENTER
But this did not work. Are there other ways to achieve what I want?
Thanks!
Your syntax has an error, you are trying to add position twice.
Try it like this:
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition[isMobile?'BOTTOM_CENTER':'TOP_CENTER']
}
Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}
antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details
I have a problem with google maps. When i firstly embeeded iframe to my page on ipad i saw buttons like streetview under the map. When i switched maps to be generated from system data, and rendering using javascript api buttons are gone?
Is there a way to show them again, is it just an options that needs to be added to map or buttons only work when using iframe?
var map;
var service;
var infowindow;
function initializeMap() {
var slocation = new google.maps.LatLng(x,y);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15
});
var infowindow = new google.maps.InfoWindow({
content: 'example content'
});
var marker = new google.maps.Marker({
position: slocation,
map: map,
title: ' example title'
});
infowindow.open(map, marker);
}
the buttons that i want to achive are http://imageshack.us/photo/my-images/43/buttonsuv.png/
In your code, add this option streetViewControl: true
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15,
streetViewControl: true
});
Have a look at this, it summarises all of the street view options.
UPDATE
After the question update, I realise you want your custom image on the street view icon.
That's not possible.
One workaround is to define a custom control on the map, and link events to it with the streetview events.
I've never done it, however you might want to have a look at this