These are the 2 samples i want to combine together:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions
https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
I am still learning and i do not know how to combine these two samples.
What i am planning to do is put an original location and destination location while showing text directions.
Please i am doing these on our school project . It would really mean a lot to me
You need to add the draggable option to the marker and the right panel in the DirectionsRenderer like so:
this.directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
Here is an example of both samples combined
Related
I am very new to this, so please forgive me if this question is stupid. I am using a custom Google Map in my website. I have 2 layers and each layer has a different type of business. I am using 2 different icons/markers selected from the standard Google Maps options to differentiate between the two types of businesses.
I would like to create a map key explaining to customers what the different markers indicate - but I cannot find these markers as images on the net, and I can't figure out how to save or download them from the map itself. So my question is: Is there a way to download and save the actual marker/icon image, so I can re-upload it elsewhere on the page and create a map key? I realize that the Google Map already has a simple key (if you know to click on it to see it) but I was hoping to create something with more text/explanation, that is more obvious to customers when the page loads.
Here is the url for the map I'm referring to: www.washingtonlavenderassociation.org/map
Thank you!
http://map-icons.com/
var marker = new Marker({
map: map,
position: new google.maps.LatLng(-27.46577, 153.02303),
icon: {
path: SQUARE_PIN,
fillColor: '#00CCBB',
fillOpacity: 1,
strokeColor: '',
strokeWeight: 0
},
map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
});
or from docs: https://developers.google.com/maps/documentation/javascript/examples/icon-simple
I have a friend who struggles organising people working around the country for the most appropriate sites in the UK (In the telecommunications sector)
I want to make him a map of the UK where each county works as a hyperlink to a list (This is because I need it to be visual and for him to understand who lives closest to each site, this could also be great, if not better as a postcode map).
I was wondering if it was possible or even if I could find the code online to draw the correct shapes for the hyperlinks, I couldn't find anything on github or any previous questions for somebody who has tried this.
As I am a beginner it would be great if I could make these hyperlinks using HTML (It doesn't need to look pretty, it just needs to be shaped like the UK!)
It would be great to get suggestions as to how I can do this.
Thanks for you time
Google Maps API is the way to go (as mentioned by other).
The idea is that you should build a polygon for each county in the UK, assign a click event to each polygon you just created and finally redirect the user to the link that you want.
I made a JSFiddle that does it for the Avon county in the UK.
https://jsfiddle.net/mpariscl/vmysg6yh/1/
$(function() {
initialize();
});
function initialize() {
var myLatlng = new google.maps.LatLng(51.6881171980821, -2.51998453948394);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var county = new google.maps.Polygon({
paths: CountyCoordinates(),
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
county.setMap(map);
google.maps.event.addListener(county, 'click', function() {
location.href = 'https://en.wikipedia.org/wiki/Avon_(county)';
});
}
You can then add the missing counties using the coordinate that you will find on this website : http://www.nearby.org.uk/counties/
Google Maps API is the way to go here. You could combine these two examples:
Geocoding for looking up the original address
KML layer For adding the location of his employees as markers so he can see who is closest.
You can generate a KML file by creating your own map on Google Maps.
It's not really beginners stuff but due to the examples you should be able to get started.
If you want an easier solution you could just create a map on Google Maps and add location of employees there. You can share maps and that would probably be a pretty good tool to solve your friends problem.
Edit I just saw your comment about Google Maps. You can perhaps make it easier by styling the map a bit and leaving out details that might be confusing. You can use something like MapStyle for that.
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 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.
I am looking for numbered markers.
and manually creating marker numbered from 1-1000 is quite laborious.
Is there are better way to upload an image and the program generated 1000 images from that numbered from 1 to 1000
You can use Dynamic Icons of Google Chart API, and get customized markers for your map.
You can use for example this pattern for marker's icon:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=*number*|FF776B|000000
and the usage could be this:
var number = 15; //
var marker = new google.maps.Marker({
position: latlngOfMarker,
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000'
});
The icon will be like this:
However, note that the service is deprecated ,and it will not be suitable for long term projects.
Here are some options:
MarkerWithLabel
numbered markers from 0 - 300 (found with a little googling)
numbered markers from 0 - 999 (more googling)