Have problem with marker adding.
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
https://jsfiddle.net/73ogq84a/
Simple example, each seconds I put marker, page not reloading, but reloading some layout and we see effect of map reload.
It is possible to do that put marker smoothly.
But on this page http://www.flightradar24.com/simple_index.php all working fine, planes are flying and no effect of map reload.
Make the marker and map global. Don't recreate the map every time, just move the marker.
var map, marker, myLatlng;
setInterval(function () {
if (!marker || !marker.setPosition) {
marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
} else {
marker.setPosition(myLatlng);
}
}, 5000);
updated fiddle
Provide map property when you create marker:
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
title:"Hello World!"
});
Related
On small zoom levels one place will be displayed twice or more (world map is repeated horizontally). When I place marker on map with coordinates (e.g. -32.05604, 115.74718) I will see it on map more than once. It's normal.
But if I try to show infowindow on mouse hover I will get wrong behaviour. Infowindow will be always showed near one of my markers and never near other, without relation what marker was under mouse cursor.
See example here: (try to move mouse to left marker on map).
https://jsfiddle.net/m3wpk1gr/1/
How to show infowindow for marker which under mouse?
My code:
function initialize() {
var myLatLng = new google.maps.LatLng(-32.05604, 115.74718),
myOptions = {
zoom: 1,
center: new google.maps.LatLng(-32.05604, 0)
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
var iw = new google.maps.InfoWindow();
marker.addListener('mouseover', function() {
iw.setContent('InfoWindow');
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
}
initialize();
I'm afraid there is nothing you can do to get the desired result(the position is correct, so when the position exists multiple times on a map, the API has to make a decision).
What you can do: set the optimized-option of the marker to false, then they will not be repeated at lower zoom-levels
I am sure this question is answered already but I cannot find it.
How to I change the marker layer of a marker on google maps v3 Javascript api?
For example in the image below I want the bus icon to appear above all T icons.
My bus icon is made like this:
var image = {
url: getIconUrl(bus.num),
anchor: new google.maps.Point(30,30)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: image
});
My T icon is made like this:
var image = {
url: stopIcon
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image
});
The bus is always made after the T because T is stored locally where as bus is live data and served on demand.
you can set zIndex as per need for your marker
like:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image,
zIndex: 1// as needed
});
Or you can change it using setZIndex() method:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image
});
marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
You can control with z-index option.
var image = {
url: getIconUrl(bus.num),
anchor: new google.maps.Point(30,30)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: image,
zIndex: google.maps.Marker.MAX_ZINDEX // <--
});
When i click the text. google map will draw on modal pop up in bootstrap
Here google map is created and location is point out by marker. marker placed in left top corner. not in center position.
Calling the google map
td_location.innerHTML = '<span data-toggle="modal" data-target="#map"><img src="img/marker.png" class="add_marker" onclick="createMap('+json_obj.devices[i].latitude+','+json_obj.devices[i].longitude+')"/></span>'
google map creation
function createMap(lat,lng)
{
var mapOptions={
zoom:10,
//center:new google.maps.LatLng(lat, lng)
};
map=new google.maps.Map(document.getElementById('locationMap'),mapOptions);
var pos=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: pos,
map: map,
});
map.setCenter(pos);
return true;
}
google.maps.event.addListenerOnce(map, 'idle', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(pos);
});
I'm trying to show markers on my map. but it's not showing them.
this is the code I use:
var map;
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(27.9881, 86.9253),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', addMarker);
}
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
console.log(markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console is logging on every click an new coordinate, so the function is called, and coordinates are passed. And I can't really see any problems in the marker code.
So can anyone see the problem?
map is a local variable, only visible inside initialize.
Use this instead of map when you set the map-property of the marker:
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: this
});
}
Explanation:
the callback will be executed in the scope of the object that triggers the event. Here it is the Maps-instance(because the click-listener has been applied to the map ), this will refer to this object inside the callback.
markers.push(event.latLng);
Here you're pushing the latlng, not the marker.
markers is an array variable with global scope, whereas marker is a local variable.
In markers array you have to insert each inidividual marker and then process it.
function addMarker(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
markers.push(marker);
}
I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.
You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).