Bing Maps: how to get rid of names and borders - javascript

I want to embed a satellite Bing map without country / city information and without borders, basically I only want the satellite photos and add my custom pins. Is there a way to do that?
Right now, I create my map with:
var map = new Microsoft.Maps.Map(document.getElementById("bMap"),
{
credentials:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
center: new Microsoft.Maps.Location(35.173808, 90.402344),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 3,
disableZooming: true,
showCopyright: false,
showDashboard: false,
enableSearchLogo: false
}
);

For sure, you can use the mapTypeId property in the mapOption and replace your line:
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
By this line:
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
See the MSDN for reference: http://msdn.microsoft.com/en-us/library/gg427625.aspx
Also, in combination, you need to configure the label information by using the labelOverlay property:
var mapOptions =
{
credentials:"Your Bing Maps Key",
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(37.794973,-122.393542),
zoom: 17,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden
}
//Load the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );
Here is the MSDN reference:
http://msdn.microsoft.com/en-us/library/gg427628.aspx
http://msdn.microsoft.com/en-us/library/gg427602.aspx

Related

Blazor: Google Maps JS API

Morning,
So currently in my project i am using an embeded google maps API with JS in my blazor project. The map is on the page and fucntional. I used tips from this following article on stack overflow (Launch Google Maps On Blazor)
Using the following JS in my _Hosts file
I need to remove certain features of the map in JS
<script>
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById
("map"), options);
}
</script>
Any pointers on where i can find the code to turn features off?
I need to remove these features that open full screen or a new tab
Have you tried disabling 'disableDefaultUI: true'
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
disableDefaultUI: true
});
}
Check documentation https://developers.google.com/maps/documentation/javascript/controls

Google maps autoload hidden place in marker location

Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.

google maps api 3 - show specific continent only

Please assist. Ive googled and gone through stack overflow but am unable to find this information anywhere. Is there a way to show only a specific continent, in my case Africa and hide all other unwanted continents in google maps. These maps shouldn't show at all. I came across this article -> Can i hide land masses with Google Maps API
But there is no specific example.
I am using Google Maps API 3.
Currently I have:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
//Implement map styling
var styles = [
{
"stylers": [
{"visibility": "simplified"}
]
}
];
var styledMap = new google.maps.StyledMapType(styles, {name: "MyMap"});
var mapOptions = {
center: new google.maps.LatLng(0.972198, 23.994141),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
draggable: false,
scrollwheel: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//Load kml of africa
var kmlMap = new google.maps.KmlLayer('http://myOverLay.kmz',
{
//suppressInfoWindows: false,
//map: map,
preserveViewport: true
});
kmlMap.setMap(map);
//map.mapTypes.set();
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
One option:
Cover the whole world except for a hole over your continent of choice. example of concept (US state of Virginia)
Limit the zoom and the bounds to prevent the map from going too far from showing that continent. description of how to limit the viewable area
Doesnt seem possible. Ended up using image mapster

google map v3 zoom controls not showing

I am not seeing any reason why the zoom controls are not showing up as the controls are not disabled in my option? this is v3 google map..has anyone faced similar issue? I can zoom in and out using mouse scroll button or touchpad scroll of laptop..but the icons +/- would be great!
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.095287, -79.3185139);
var myOptions = {
maxZoom: 12,
//zoom: 9,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
You have to use zoom and also center properties to display your map correctly, here is a jsfiddle of a map constructed with your options.
http://jsfiddle.net/5ytkx/9/
Remove the comments before zoom and center properties
zoom: 9,
center: latlng,
Could it be because your myOptions variable includes a trailing comma?
mapTypeId: google.maps.MapTypeId.ROADMAP,
Will it work if you remove that?
Hope this helps
Could you try this?
mapTypeId: google.maps.MapTypeId['ROADMAP']

Remove Pan control in Google Maps API V3

Is there any way to remove the circular panning navigation control but keep the zoom control in the Google Maps V3 API? I've tried forcing it offscreen with jQuery but every time the map is updated it comes back. Any ideas? Thanks!
You may also have a look in here, you can remove/add specific controls when you declare your map:
var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Taking Control of the Google Maps API V3 Controls
You can use google.maps.NavigationControlStyle.SMALL to display a small plus/minus zoom control, otherwise you'll have to create your own zoom control and add it to the map.
http://code.google.com/apis/maps/documentation/javascript/controls.html
In V3, when you define your options - you have the option of disabling/enabling any UI features:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
//panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

Categories