We Keep Coding

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.

Bing Maps: how to get rid of names and borders

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

What's wrong with this google map, api 3 implementation issue

I have written something similar to this in the past using an older version of the google maps api I want to add some geocoding with some autocomplete using the api3. But my map won't even load in. The map will load in only if I take the map options and the geocoder off. Why is this?
function mapLoad(){
jQuery(function($) {
$('#map').animate({height:300,width:300,opacity:1},1500);
});
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
};
// Define map
map = new google.maps.Map(document.getElementById("map"),mapOptions);
// Define Gecoder
geocoder = new google.maps.Geocoder();
window.alert("no errors with map load");
}
EDITED neither the geocoder or the options work
i used this as a reference purely because it looks simple.

Where are you calling mapLoad? I assume in body onload. I setup this jsbin without issue. Does it help?

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']