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.
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
I have a question about placing markers on the google maps get directions. I have this script which on page load renders map however, I want to put company logo on the this map. I mean like initial map without any directions.
src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script><script type="text/javascript">// <![CDATA[
var map;
var directionsDisplay;
var manila = new google.maps.LatLng(55.009657,-1.450706);
var directionsService = new google.maps.DirectionsService();
function initialize() {
// Make the route draggable
var rendererOptions = {
draggable: true,
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var mapOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.DRIVING,
center: manila,
}
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
I know that in order to have icon on a map you need to create marker object...
var marker=new google.maps.Marker({
position:manila,
icon:'image-link'
});
and to use this marker you set map:
marker.setMap(map);
But I am using directionsDisplay.setMap(map); instead of marker.setMap(map); how I can pass this marker object to directionsService map?
G.I.Y.F This page explains how to add your own logo to a Google Map.
See also: How to add logo to copyrights in google maps?
http://www.developerdrive.com/2013/08/adding-a-custom-icon-to-a-google-maps-marker/
etc
Hello guys I've got a simple question to ask, when I open my map I have set the lat and long to open some coords, then I place one marker with a infoBubble opening when the map is loaded, but after that the map opens in the maker position. I dont want that .. is it possible force the start location to open my map in the start position instead of the marker position?
thanks
function init() {
var mapCenter = new google.maps.LatLng(-8.799445,-63.922042);
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var myLatLng = new google.maps.LatLng(-8.802732,-63.921939);
var marker = new google.maps.Marker({ map: map,
position: myLatLng,
draggable: true,
icon: icon
});
}
By default the API when a InfoWindow will be opened tries to pan the map so that the infoWindow is fully visible.
Set the disableAutoPan-property of the infoWindow to true to avoid this.
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.
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