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
Related
I am using the Google Maps API code to initialize 3 google maps on one page.
Here is the jsfiddle: https://jsfiddle.net/adamjesmith/e53yjye8/
The below code works fine but I was wondering if there is anyway I can simplify the JavaScript so I am not doing the same thing 3 times? Possibly using a for loop to through the number of maps?
function initialize() {
///// Stamford Bridge /////
var optionsSB = {
zoom: 15,
center: {lat: 51.481663, lng: -0.19095649999997022},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapSB = new google.maps.Map(document.getElementById("stamford-bridge"), optionsSB);
var markerSB = new google.maps.Marker({
position: {lat: 51.481663, lng: -0.19095649999997022},
map: mapSB,
icon: '/images/map-pin.png'
});
var infowindowSB = new google.maps.InfoWindow({
content:"<h3>Stamford Bridge</h3>"
});
infowindowSB.open(mapSB, markerSB);
///// O2 /////
var optionsO2 = {
zoom: 15,
center: {lat: 51.5030431, lng: 0.00423769999997603},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapO2 = new google.maps.Map(document.getElementById("o2"), optionsO2);
var markerO2 = new google.maps.Marker({
position: {lat: 51.5030431, lng: 0.00423769999997603},
map: mapO2,
icon: '/images/map-pin.png'
});
var infowindowBow = new google.maps.InfoWindow({
content:"<h3>O2</h3>"
});
infowindowBow.open(mapO2, markerO2);
///// London Zoo /////
var optionsZoo = {
zoom: 15,
center: {lat: 51.5352875, lng: -0.15343029999996816},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapZoo = new google.maps.Map(document.getElementById("zoo"), optionsZoo);
var markerZoo = new google.maps.Marker({
position: {lat: 51.5352875, lng: -0.15343029999996816},
map: mapZoo,
icon: '/images/map-pin.png'
});
var infowindowZoo = new google.maps.InfoWindow({
content:"<h3>London Zoo</h3>"
});
infowindowZoo.open(mapZoo, markerZoo);
}
Just wrap your map-marker-infowindow creation in a factory-like function:
function createMapWithStuff(options) {
var map = new google.maps.Map(document.getElementById(options.id), options);
var marker = new google.maps.Marker({
position: options.center,
map: map,
icon: '/images/map-pin.png'
});
var infowindow = new google.maps.InfoWindow({
content:"<h3>"+options.content+"</h3>"
});
infowindow.open(map, marker);
}
function initialize() {
///// Stamford Bridge /////
var theoptions=[ {
zoom: 15,
center: {lat: 51.481663, lng: -0.19095649999997022},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'Stamford Bridge',
id:'stamford-bridge'
},{
zoom: 15,
center: {lat: 51.5030431, lng: 0.00423769999997603},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'O2',
id:'o2'
},{
zoom: 15,
center: {lat: 51.5352875, lng: -0.15343029999996816},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'London Zoo',
id:'zoo'
}];
theoptions.forEach(function(optionObject) {
createMapWithStuff(optionObject);
});
}
See the fiddle
I have the following initialization for a google map:
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
When trying to add the marker, I get the error:
Uncaught ReferenceError: map is not defined
How can I see this map or add a marker properly to the map?
seems you don't have a proper myLatLng position for your marker try adding one eg: myLatLng = new google.maps.LatLng(45.00, 10.00);
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var myLatLng = new google.maps.LatLng(45.00, 10.00);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
<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);
}
I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Get rid of
map.setCenter(latlng);
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. :)