I have created an application that plots waypoints onto Google Maps and then using the API I show the root and navigation to each waypoint.
But I want to style each waypoint... specifically give each one a unique title. You can do this when you add a marker, but I can not see away to do this to a waypoint.
Are there any workarounds or am I missing something?
It seems you can't style them. My solution was to disable route markers for the waypoints by setting supressMarkers: true on the google.maps.DirectionsRenderer:
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressInfoWindows: true,
suppressMarkers: true,
map: map
});
Then, loop over your waypoints and a marker for each, styled however you like.
Related
I want to create a google map marker which has an animating gif.I know google maps has 2 animation drop and bounce.I want to create one except those.Is is possible to do this. Could you lead a way?
Thanks in advance.
Per docs, in google.maps.MarkerOptions you can pass optimized: false if you want to use gif as marker icon:
optimized Type: boolean
Optimization renders many markers as a single
static element. Optimized rendering is enabled by default. Disable
optimized rendering for animated GIFs or PNGs, or when each marker
must be rendered as a separate DOM element (advanced usage only).
var marker = new google.maps.Marker(
{
position: myLatLng,
map: map,
optimized: false,
icon: "http://preloaders.net/preloaders/489/Classic%20map%20marker-32.gif"
});
JS fiddle: http://jsfiddle.net/T78Hd/138/
I used markers as well as direction service in my map.
I used bounds.extend(lat),map.fitBounds(bounds);to extend the maps to show all my markers. This was working fine until i used direction service. once the direction is used, map automatically zooms to the direction from A to B.Only two markers pointing A and B are visible now in map.
But i want the map to show all the markers with the direction used between two other markers.
How could i do it?
Issue solved by using the following line
var directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport:true
});
If you don't want the directionsRenderer to zoom to its results, use the preserveViewport option.
Another option would be to use the union of the bounds of the route returned by the directionsService and the bounds you calculated for your markers.
My problem is that waypoints are highlighted in directions list like: start to waypoint 1, waypoint 1 to waypoint 2, ...
here is an example how it is looking: http://www.ridersguide.co.uk/Ride_721
I'd like to show start and instructions how to reach destination points without showing waypoints.
Do you have some idea?
you can supress the markers with these settings
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
suppressInfoWindows: true,
});
#Ramesh K's answer is generally correct. However, in this way, you also kill the marker of start point and end point. You need to create to marker by yourself then.
I think you have the defaults in the Waypoint for your api calls.
Look here for a suggestion to remove waypoints as a 'layover' in your trip
I am using the Maps API (v3, javascript) to display a bunch of local properties for sale on this client's website. When the user mouses over a marker, it loads an infoWindow with property information. Problem is, when this is down near the edge of the map, it pans the map to show the info window, which can cause issues when lots of markers are close by.
So I added disableAutoPan: true to the infoWindow call, and it seems to solve the problem. However, after some more testing, if the user manually moves the map and then hovers over a marker, the resulting infoWindow pans the map. It's like it's ignoring the setting for the infoWindow.
Anyone else have this issue or any ideas how to solve it? The code I used to call the infoWindow is below:
infoWindowAjax = new google.maps.InfoWindow({
disableAutoPan: true,
maxWidth: '260'
});
Google Maps API V3 doesn't support the V2 GOverviewMapControl option, yet. I've come across a piece of code at http://dl.google.com/io/2009/pres/Th_1045_Maps_API_Mobile.pdf , silde 19, that gives the code to display the smaller map, but not the draggable, semi-transparent blue box that you generally see here. It's possible, but unofrtunately the code is 'ellided'. Anyone have any ideas how to generate this? Thanks
This is how it works out of the box in Maps v3:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Please note the last two properties of the mapOptions object. They do the trick.
Within the overlayMap, add a draggable marker to display the frame of the RectangleOverlay, and a non-draggable marker to display the semi-transparent box itself. Then, add bindings to some of the maps' events to update size and position of the markers, i.e. the maps' bounds_changed, drag, and/or center_changed events. Finally, update the location of the maps when the frame is dragged by binding a function to its dragend event.
I am using v3 right now and the overviewMapControl seems to work. Can't find any documentation on it yet.
overviewMapControl: true
Then you see a small arrow in the right hand side of your map. Click will open it. Can't figure out how to trigger this click with javascript (jquery) doesn't seem to work.
Check out http://code.google.com/p/gmaps-api-v3-overviewmapcontrol It's an open-source project to approximate the functionality of v2's GOverviewMapControl.