<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);
}
Related
I'm trying to show the title on hovering over the marker. I'm okay if it's open by default too.
I do not want infoWindow.
Here's what I have so far unsuccessfully.
function myMap() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myCenter = new google.maps.LatLng(34.131730, -117.910127);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 16,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
rotateControl: false
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: 'images/marker.png',
scaledSize : new google.maps.Size(60, 60),
};
var marker = new google.maps.Marker({
position:myCenter,
title: "Hello World!",
icon: image
});
marker.setMap(map);
}
function initialize() {
var myLatlng = new google.maps.LatLng(48.89364, 2.33739);
var mapOptions = { zoom: 13, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); }
google.maps.event.addDomListener(window, 'load', initialize); initialize();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
initialize();
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
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);
};
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. :)