We Keep Coding

how to hide drop pin and map and satellite from google map

this is my code
function initMap(latitude, longitude) {
var myLatLng = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
and here is how it's displayed
I would like to hide drop pin and Map/Satellite, how would I do that?

Form here https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults
Either can use
disableDefaultUI: true
globally to remove all from UI or use
{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}
to remove/add individually

Google Maps Markers Wont Show Up

<script type="text/javascript">
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000,-40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
</script>
I am trying to put some markers on the map of certain cities. I can not seem to make the makers apear. I have looked through several forums, and tried everything.
I hope this is enough information. I am still very new to stack overflow, so If I did this wrong, please let me know how to post a question more clearly.
Thank you,

You are missing the new keyword for position parameter while creating marker, please check the below code, it should work.
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000, -40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: new google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}

Google maps api v3 hide gray building overlays

I am making a map that can display several trains live driving around inside the station. However there is a grayed out building on top of the station that makes the tracks almost impossible to see. However when I look at google maps itself those buildings don't even appear. Is there a setting in the map options that I can implement to get rid of those buildings?
These are my existing map options:
var mapOptions = {
zoom: 17,
center: markerBounds.getCenter(),
disableDoubleClickZoom: true,
mapTypeControl: false,
disableDefaultUI: true,
scrollwheel: false,
draggable: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
My map:
Google maps:
Thanks in advance.

I found out how to fix the issue. Simply change
mapTypeId: google.maps.MapTypeId.ROADMAP
to
mapTypeId: google.maps.MapTypeId.TERRAIN

How can I calculate the center of multiple polygons in Google Maps Javascript API?

Let's say I have an array of polygons, which contains a bunch of lat/long coordinates used to draw these areas on a map:
// These polygons are just an example to illustrate structure, they are not my actual polygons
var polygons = [
[
{lat: 1, lng: 2},
{lat: 3, lng: 4},
{lat: 5, lng: 6},
{lat: 1, lng: 2},
],
[
{lat: 7, lng: 8},
{lat: 9, lng: 10},
{lat: 11, lng: 12},
{lat: 7, lng: 8},
],
];
When initializing the map, How do I set the initial viewport of the map to be centered around all polygons?
Here is an image illustrating what I mean:

You could construct a LatLngBounds object. For each point in your polygons, extend that Bounds object to include that point. Then update the map to fit those bounds.
Something like this:
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polygons.length; i++) {
for (var j = 0; j < polygons[i].length; j++) {
bounds.extend(polygons[i][j]);
}
}
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
One issue you might have is I'm not sure if the bounds.extend will work with the {lat: 1, lng: 2} format for your points. You may have to construct LatLng objects instead.
In which case it would be:
bounds.extend(new google.maps.LatLng(polygons[i][j].lat, polygons[i][j].lng));

Just a snippet from my old project
var styledMap = new google.maps.StyledMapType(styles);
var mapOptions = {
//backgroundColor: '#000',
//draggable:false,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
disableDoubleClickZoom: true,
overviewMapControl: false,
panControl: false,
rotateControl: false,
streetViewControl: false,
zoomControl:false,
noClear: true,
zoom: 6,
center: new google.maps.LatLng(12.1, 122), //<----- set the center here
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);`enter code here`
Take a look at center property within the code above
center: new google.maps.LatLng(12.1, 122), //<----- set the center here

Google maps remove default man icon

i am using google maps with my project as you can see here ( Demo )
in left top you can see man icon and zoom
i want to remove man icon and set zoom left-top
what should i do? i am using this library js library and you can see other library in (view) source demo link [3]

This should remove the street view (the man) and the pan control:
var mapOptions = {
center: mapCenter,
zoom: 10,
panControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Example of using Google Maps options:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

I hope you work
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
disableDefaultUI: true, //disables controls
zoomControl: true, //zoom control enables
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE, //enables the dimension
position: google.maps.ControlPosition.TOP_RIGHT //position enables
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}

to disable the man icon, you can set the streetViewControl into false in your map options.
streetViewControl: false

The above answers do not meet your question. Try this caused its work for me to disable the people icon.
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
if you want to remove all then use this :
mapTypeControl: false,
disableDefaultUI: true,
if you want to style the map color, try this :
var mapStyles = [ {"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"on"},{"lightness":10}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":50}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#3b5998"},{"saturation":30},{"lightness":49}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#3b5998"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#3b5998"}]}, {featureType:'road.highway',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-92},{lightness:60},{visibility:'on'}]}, {featureType:'landscape.natural',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-71},{lightness:-18},{visibility:'on'}]}, {featureType:'poi',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-70},{lightness:20},{visibility:'on'}]} ];
change color attribute # as you like, then put this style in your map :
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 9, // optional based on your requirement
styles: mapStyles
If you want to style the icons, then put this :
marker = new google.maps.Marker({
icon: "/images/icon/marker123.png", // based on your dir file
position: point, // based on your srcipt selection
map: map
Hope this useful for others. :)