marker = new google.maps.Marker({
icon: image,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
flat: true,
optimized: false,
map: map,
visible: true,
customInfo: locations[i][0]
});
I have the above to build my Marker in my Google Map but when the marker is clicked, the map zooms to the location and I'd like to make the marker non clickable.
I have tried the following with no success
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(17);
map.setCenter(this.getPosition());
marker.MarkerOptions ({
clickable: false
});
});
Read the documentation - the name of the method you are looking for is called setOptions
marker.setOptions({clickable:false});
I found it and its actually quite a simple way of doing it.
marker.setClickable (true);
Related
In my application two markers have been shown and in between these maker a route has been formed.
My task is to prevent marker to drag from the map option; because I have not taken any reference or variable with respect to the marker.
I have tried with the following code .
var mapOptions =
{
zoom: 7,
center: mumbai,
draggable: false
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
And,
map.setOptions({draggable: false});
Both the way are not working for me.
The draggable should be inside the marker options and not inside the map options. What you're doing will surely not work. draggable should be like this:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:false,
title:"You can't drag me!"
});
Also, markers are supposed to be not draggable if the draggable option is not set at all like this:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"You can't drag me!"
});
So if you are not adding this to your marker, it should not be draggable, just as what's needed for your use case.
Hope this helps!
I have the following code to add a marker to my map:
var marker = new google.maps.Marker({
icon: '/pin.png',
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
Everything works fine except the icon pops up for a split second before running the animation. Has anyone else encountered this problem?
I was experiencing this same behavior and I found that further defining the custom icon helped fix this issue.
var image = {
url: 'images/map_marker.png',
// This marker is 20 pixels wide by 30 pixels tall.
size: new google.maps.Size(20, 30),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the image at 0,30.
anchor: new google.maps.Point(10, 30)
};
var marker = new google.maps.Marker({
icon: image,
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.
the problem is that the map draws correctly only the first time the page is displayed,
if routes are changed and then a map is being drawn again it looks "distorted".
the examples I found are "one page" part of apps.
View:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.
I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:
#map-holder img {
max-width: none;
}
how can I fix this ?
EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/
go to 'settings' and then back to 'map' to see the distorted map
It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly.
When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.
In the Google Maps v3 reference, I see there is a method setDraggable(boolean) which can be applied to a map marker.
However, I want to set setDraggable to true on the map, not on a map marker.
I have set the property draggable to false in the mapOptions, but I don't know how to set this to true later... map.setDraggable(true) does not work:
// object literal for map options
var myOptions =
{
center: new google.maps.LatLng(37.09024, -95.712891),
zoom: 4, // smaller number --> zoom out
mapTypeId: google.maps.MapTypeId.TERRAIN,
// removing all map controls
disableDefaultUI: true,
// prevents map from being dragged
draggable: false,
// disabling all keyboard shortcuts
keyboardShortcuts: false,
disableDoubleClickZoom: true,
// do not clear the map div
noClear: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setDraggable(true); // does NOT work!
Try:
map.setOptions({draggable: true});
I entered my code in this section and it worked on mobile and desktop
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
setDraggable is not used in the Map class.
It is used in the:
Marker Class,
Polyline class,
Polygon class,
Rectangle class and in the Circle class.
In your case you can simply use:
map.draggable = true;
When I add more Markers to Google Map with different icon types like:
...
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://www.test.com/marker.png",
zIndex: 10
});
...
and
...
var resultIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
strokeColor: "black",
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
zIndex: 5
});
...
Than the zIndex doesn't work and the Symbol marker appears on the top.
Am I wrong with my code or how can I make the zIndex working?
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
This seems to be an issue with the new canvas based rendering of the markers.
Edit:
This really solves the issue.
One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.
Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.
http://jsfiddle.net/BNWYq/1/
Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/
I've made a little fiddl:
http://jsfiddle.net/gSRmV/
Looks like a bug, that has to be fixed by google.
Adding optimized: false doesn't change anything.
Edit: Still looks like bug, but the two solutions from tborychowski and Codetoffel seem to work.