I did draggable directions according to Google manual:
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ser = new google.maps.DirectionsService();
google.maps.event.addListener(ren, 'directions_changed', function() {
// here I can load map, etc... everything works.
});
But, what should I do, if I want to change route options before next drag. I want exactly toggle avoidHighways and avoidTolls to true/false.
Is it even possible or not?
Both properties are options of a directionsRequest, so you'll have to request the route again(based on the current origin/destination) with the desired options.
Related
I'm creating a Google Map from the developer API v3. It's populated with markers created dynamically from ColdFusion querying an MsSQL database.
<cfloop query="One">
<script>locations[<cfoutput>#One.userID#</cfoutput>
] = new google.maps.LatLng(<cfoutput>#One.latLng#</cfoutput>);
</script>
</cfloop>
I need a way to recognise the marker when its clicked so I can display address details in a box below the map and also higlight markers when a button is clicked lower on the page.
In general, you would typically assign your own custom properties to the Marker. Something like:
function markerClicked(e) {
console.log('Marker ' + marker.myData + ' has been clicked');
}
var marker = new google.maps.Marker(...);
marker.myData = 1; //this could be arbitrary data or even another object
google.maps.event.addListener(marker, 'click', markerClicked);
Adding custom data to any Google Maps API object has risks though. Google's code is obfuscated and the internal (non-documented) properties can and do change. Make sure your property is named in such a way that it won't conflict with any existing property or future property. Tip: Choose a property name longer than 3 letters.
If you are going to minify/compile/compress your maps code, then there are additional considerations.
What about :
google.maps.event.addListener(marker, "click", function (e) {
var clicked = this;
//...
});
This is pretty thoroughly documented/explained in the documentation.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
When you create markers, add dom listeners to the markers like this
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
How to correctly set just the location based on address instead of position?
As a sidenode im try to set it to a decent zoom value. Does anyone know where in the docs this is mentioned?
Using below code but cannot find any reference on how to set the location of the marker based on "address, street, city, state, country )
$(document).live("pageshow", "#map_page", function() {
$('#map_canvas').gmap().bind('init', function(ev, map) {
$('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
});
});
});
Use google geocoding API to convert addresses into latlng objects and
then plot the position in map
https://developers.google.com/maps/documentation/geocoding/
Make use of fitBounds method for adjusting the zoom level based on
the points you are plotting.
https://developers.google.com/maps/documentation/javascript/reference#Map
I am using Google Map v2 and I only want map view and nothing more. I also would like to get rid of the zoom in and out buttons.
If anyone knows what I need to add to the following that would be great.
function stores()
{
$('#storelist ul#stores').html("");
fetch(203,"task=location&location=vic");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-37.810013, 144.962683), 8);
map.setUIToDefault();
yellowIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
markerOptions = { icon:yellowIcon };
}
Remove map.setUIToDefault(). It adds the default look and feel to the Map.
(Reference docs: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.setUIToDefault)
If you want, you can also customise how the map can be interacted with. For example map.disableDoubleClickZoom() or map.disableDragging(). See the reference above for details.
I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}
Are there any contextual menus available for Google Maps v3?
You can add context menu as it is decribed here How to add context menu to google maps, using api V3:
Here is a full JQuery solution : http://gmap3.net/examples/context-menu.html
Old question but it came up in my googling so I thought I would post the simplest answer. It's a context menu without the use of more 3rd party js libraries. There's also a latlon object in the event that you can get the lat/lon for where the person clicked, to add a maker or whatever.
var contextMenu = google.maps.event.addListener(
map,
"rightclick",
function (event) {
// use JS Dom methods to create the menu
// use event.pixel.x and event.pixel.y
// to position menu at mouse position
$('.contextmenu').remove(); //remove previous context menus
contextmenuDir = document.createElement("div");
contextmenuDir.className = 'contextmenu';
//now add our options.
contextmenuDir.innerHTML = '<a id="menu1"><div class="context">menu item 1<\/div><\/a>'
+ '<a id="menu2"><div class="context">menu item 2<\/div><\/a>';
$(map.getDiv()).append(contextmenuDir);
contextmenuDir.style.visibility = "visible";
// might need to offset if you have moved the map div like i did (then - the pixel size off)
$('.contextmenu').css('left', event.pixel.x );
$('.contextmenu').css('top', event.pixel.y);
console.log(event); //log some details about the object we get
});
None yet. Google working on one now.