Blazor: Google Maps JS API - javascript

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

Related

Google Maps Api shows grey map

I'm trying to integrate Google Maps Javascript API in my wordpress website.
I created an API key, and I added a pure html code block in my page.
Before it worked perfectly, but now it only show a grey piece. When I zoom out and drag the map around, the following picture is visible:
This is my code in the html block:
<div id="googlemaps"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
And YES, I replaced YOUR-API-KEY with my API key in my code (this is just so others won't use the generated code).
I don't know what is wrong with the map. I do not have errors in my webconsole.
Thanks in advance!
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8,
backgroundColor: '#fffff',
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script
<div id="googlemaps"></div>
Use backgroundColor property
Call google.maps.event.trigger(map, 'resize') inside initMap() as you have resized the map div.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
google.maps.event.trigger(map, 'resize')
}

Google Map marker not showing after uploading to server, locally works fine

I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.
I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.
Here's the script I'm using
/*GOOGLE MAPS*/
function initialize() {
// Declare map style
var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
var mapOptions = {
center: {lat: 46.211000, lng: 16.913157},
zoom: 13,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Change map style
map.setOptions({styles: grayscale});
var image = 'img/vemo-google-map-marker.png';
var marker = new google.maps.Marker({
position: {lat: 46.211000, lng: 16.913157},
map: map,
title: "VEMO TRADE d.o.o.",
icon: image,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to specifiy whole absolute path here:
var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';

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

Toggle Street View

How can I toggle Streetview on an specific map canvas by clicking a button (API v3) ?
function ToggleStreetView(map)
{
//Assume map contains the google.maps.Map object
}
This is the function that I wrote for a maps app that I wrote a while ago:
// Toggles between map and panorama view
function togglePanorama(){
if(isPanorama){
map.streetView.setVisible(false);
$('#message').empty().append('Click here to take a tour of our office.');
isPanorama = 0;
} else{
map.streetView.setVisible(true);
$('#message').empty().append('Back to the map.');
isPanorama = 1;
}
}
Though I was using it with a custom panorama it will work just fine with the default Street View.
Get the 'streetview' of your map then setVisible to 'false' and your streetview should no longer be visible.
// map would be map instance
map.getStreetView().setVisible(false);
I assume you are using Javascript version 3 API from google maps
here is a sample code
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
if you lool carefully you can see line of code
mapTypeId: google.maps.MapTypeId.ROADMAP
you can declare our map variable and than iinside your function change its MapTypeId

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