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!
Related
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);
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;
Here is the code I'm using to show markers and infoWindows. It's working perfectly.
mapOptions = {
zoom: zoom,
center: getMyCompanyCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($(this)[0], mapOptions)
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map
})
google.maps.event.addListener(marker, 'click', ()->
infowindow.setContent('content')
infowindow.open(map,this)
)
return marker
firstCompanyMarker = createMarker(companiesData[0])
createMarker(companiesData[i]) for i in [1..companiesData.length-1] by 1
google.maps.event.trigger(firstCompanyMarker, 'click')
However, there is one issue. The infoWindow of the default (firstCompanyMarker) marker is not showing as I need. It's crossing the top edge of the map.
I tried to move the center but there was no result.
lat += 100 #or lat -=100. Anyway it does NOT work
long += 100 # it does work but it's moving the center
#of the map to the left or the right and it's not what I need
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Your ideas? How do I make infoWindow to be shown in the center of the map and to not cross the top edge of it?
Add a the following line after "infowindow.setContent('content')"
map.setCenter(marker.lat-100, marker.lng-100);
However, this is not a real solution. From experience I can tell you that you map is very little for the standard infowindow. You have really 2 options to solve this:
1) Increase the size of the map so the default infowindow will show with the marker in the center of the map or
2) Use a custom infowindow and make it a lot smaller than the default one
Hope that helps!
map.setCenter(marker.lat, marker.lng- (popup.getheight/2));
This should work.
Late answer for the sake of anyone stumbling on this. I had the same problem and noticed that if I closed the infoWindow and clicked the marker, the infoWindow would open and pan to the correct position. Instead of triggering a click, waiting for the tilesloaded event before opening the initial infoWindow was the key.
// Trigger click after tiles are loaded so auto-pan positions infoWindow correctly
google.maps.event.addListenerOnce( map, 'tilesloaded', function () {
infoWindow.open( map, marker );
} );