I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.
Related
I'm having an issue with with combining marker manager and maplabel using google maps API.
When I bind a label to a marker's map and position everything works as expected. When I move the marker the label moves, and when I remove the marker from the map, the label is also removed. The issue happens when I add the marker to marker manger. It appears that all bindings are broken so my label no longer moves with the marker and the label stays on the map after the marker is removed.
Here's a JS fiddle showing the issue: http://jsfiddle.net/d6Su5/
You will see the first marker (not in the manager) can be moved with its label but the second marker leaves the label behind.
Code:
var map;
var mgr;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map);
var marker = new google.maps.Marker({
title: 'No manager',
position: new google.maps.LatLng(46.87916, -3.32910),
map: map,
draggable: true
});
var mapLabel = new MapLabel({
text: 'No manager'
});
mapLabel.bindTo('position', marker);
mapLabel.bindTo('map', marker);
var marker2 = new google.maps.Marker({
title: 'With manager',
position: new google.maps.LatLng(44.87916, -3.32910),
map: map,
draggable: true
});
var mapLabel2 = new MapLabel({
text: 'With manager'
});
mapLabel2.bindTo('map', marker2);
mapLabel2.bindTo('position', marker2);
google.maps.event.addListenerOnce(map, 'idle', function() {
mgr.addMarker(marker2, 1);
});
What am I missing?
I found the solution. The position should be set on the label instead of the marker, and then the marker should be bound to the label, not the other way around. Also, the map is set by the marker manager when the marker is loaded. Here's an updated jsfiddle: http://jsfiddle.net/d6Su5/2
var marker2 = new google.maps.Marker({
title: 'With manager',
draggable: true
});
var mapLabel2 = new MapLabel({
position: new google.maps.LatLng(44.87916, -3.32910),
text: 'With manager'
});
marker2.bindTo('map', mapLabel2);
marker2.bindTo('position', mapLabel2);
google.maps.event.addListenerOnce(map, 'idle', function() {
mgr.addMarker(marker2, 2);
});
Hopefully this helps someone in the future!
I am new at Google Map applications. I have read an article about Polyline Arrays (https://developers.google.com/maps/documentation/javascript/overlays#PolylineArrays). In the example, it created a dynamic arrays using Event Click. My question is, is it possible that i can create a polyline in an array variable not on a click event?
Here is the code from google documentation:
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
I have made some of my own code:
<script>
var line;
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, -180),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var path = [new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856)];
line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map)
}
function addNewPoint(position) {
var path = line.getPath();
path.push(position);
}
''''' I create a single variable for a new path.
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And when i run it. It does not work. Thank you for any response.
I think you need to change this:
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
to this:
var NewPath = new google.maps.LatLng(-27.46758, 153.027892);
addNewPoint(NewPath);
So you only pass through a LatLng point, rather than an array containing one. So it corresponds more closely to the example you gave,
path.push(event.latLng);
I have a working version of map with a draggable marker. Zoom-in to include all markers works
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
where results[0].geometry.location is new draggable location.
This works if the new location is forming a bigger area. But when I drag the marker to a closer location to the rest of the markers, I don't think this extends the bounds and therefore, no zoom-in.
Any idea?
When you drop the marker, add the marker position to a temporary LatLngBounds object that includes the original bounds and fit the maps bounds to that on each drag drop.
var mapOptions = {
center: new google.maps.LatLng(38.68551, -96.341308),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var bounds = new google.maps.LatLngBounds(),
markers = [];
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));
for (var m in markers) {
bounds.extend(markers[m].getPosition());
}
map.fitBounds(bounds);
var dropMarker = function(latlng) {
var marker = new google.maps.Marker({position: latlng, map: map}),
tempBounds = new google.maps.LatLngBounds();
// notice we use the union method here to add the original bounds object
tempBounds.union(bounds).extend(marker.getPosition());
map.fitBounds(tempBounds);
}
// imitate dropping marker far away from others
setTimeout(function() {
dropMarker(new google.maps.LatLng(31, -96));
}, 2000);
// imitate dropping marker close to others
setTimeout(function() {
dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);
Instead of just fitting the temporary bounds you could try the map panToBounds method to get a nice smooth transition.
I'm using Google Maps For Javascript. I reorganized all options and working true location. But when i add style and marker, I don't see the effects. How can I fix it?
var locations = [
['MyLocation', 41.084951,29.016048],
];
var waStyle = [
{
featureType: "all",
stylers: [
{ saturation: -100 }
]
}
];
var map = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("/themes/bc/images/bc_pin.png");
var map = new google.maps.Map(document.getElementById('map_detail'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Using your code, I see the marker. The style isn't visible because you don't use it on the map.
documentation
To actually use the style (your code with some comments and added code from the documentation referenced above):
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});
var img = new google.maps.MarkerImage("mapIcons/marker1.png");
// Create a map object, and include the MapTypeId to add
// to the map type control.
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(41.084951,29.016048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
To use the marker icon you have defined, include it in the google.maps.Marker constructor:
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: img,
map: map
});
Note that if you have more than one marker, you are going to have issues with associating the infoWindow with the marker which can be fixed with function closure (a createMarker function) and is a FAQ.
working example based off your code
i am working on google maps, what i want to do is to click on the map it add a marker to the map its working fine but the problem is that i need to move the same marker to a new place if i click some where else instead of new marker. and also when i click on any point it give me the address of that place in a text field
here is my code
<script type="text/javascript">
var map;
var markersArray = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 7,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
}
You can call clearOverlays anytime you create a new marker.this way you hide the previous marker and only the new is shown.
another way is to have a var marker just as you have a var map. you can edit the markers position in addMarker.
as far as geocoding is concerned take a look at this