i am working on google map flutter and i added multiple markers on map. so i want to draw route between user location and the marker clicked
for (int i = 0; i < lat.length; i++) {
_markerIdCounter++;
markerId = MarkerId('marker_id_$_markerIdCounter');
double la = lat[i];
double lo = long[i];
destPosition = LatLng(la, lo);
address = await geolocator.placemarkFromCoordinates(
destPosition.latitude, destPosition.longitude);
Placemark place = address[0];
_markers.add(Marker(
markerId: markerId,
position: destPosition,
icon: destinationIcon,
infoWindow: InfoWindow(title: place.name.toString()),
onTap: () {
var options;
_onMarkerTapped(markerId);
LatLng des = destPosition;
LatLng cu =
LatLng(currentLocation.latitude, currentLocation.longitude);
getDistanceTime(cu, destPosition);
setPolylines(destPosition);
}));
One option is to use the google maps directions API that will return you a ROUTE object that contains everything you may need to draw the path(polyline) based on the props you've sent to it( for example str address A to str address B or lat long A to lat long B etc...). Click here for full API doc ref
You can use flutter_polyline_points package. It's a plugin the uses Google Maps Directions API to show route/polylines on maps. Make sure you have a valid API key and Directions API enabled on your Google cloud console to use it.
You can create a method that accepts latlng coordinates of your marker and then call that method every time you click the marker. Kindly check out the examples in the package doc for more details.
Related
I am using google maps v3, Currently it is working fine, if i pass the latitude and longitude in 'position'. But, I need to pass address instead of latitude and longitude.
var ll = new google.maps.LatLng(dat_values[i].lat, dat_values[i].lng);
var marker = new google.maps.Marker({
position: ll,
icon: myImage,
shadow: myShadow,
});
Kindly anyone suggest.
thanks,
Here's another similar approach:
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address=573/1,+Jangli+Maharaj+Road,+Deccan+Gymkhana,+Pune,+Maharashtra,+India&sensor=false');
$output= json_decode($geocode);
$lat = $output->results[0]->geometry->location->lat;
$long = $output->results[0]->geometry->location->lng;
From:
http://amiworks.co.in/talk/how-to-get-latitudelongitude-from-an-address-or-geocoding-using-php/
You've have to use the Geocoder service to convert the address into a LatLng.
I used this code but its not working.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(10.35,79.4167), 13);
var marker = new GMarker(new GLatLng(10.35,79.4167));
map.setCenter(new GLatLng(8.7167,77.483), 14);
var marker = new GMarker(new GLatLng(8.7167,77.483));
map.setCenter(new GLatLng(21.83,78.75), 15);
var marker = new GMarker(new GLatLng(21.83,78.75));
map.addOverlay(marker);
map.setUIToDefault();
}
}
Your code will only add the last marker. You are only calling addOverlay once at the end (so only the last marker will be added to the map).
You also call setCenter multiple times, so only the last setCenter will be applied to the map. setCenter just sets the visible area on the Google Map.
You are using Google Maps v2 in your code, I suggest you check out the more current v3 API. If you are starting a new project, you may as well use the latest stuff.
If you have some other reason for using the v2 API, there is a range of good samples to get you started.
What is the most effective and accurate way to geocode a UK postcode? Using the built in geocode object results in massively blurred results (lots of postcodes returning just a general area).
Are there any free UK postcode geocoding services I can plug into via JavaScript?
Edit: To be clearer this uses the local search in google search api, not the google maps api to do the geocoding which is much more accurate.
The best way is to use Google Search Api.
If you get an api key and get it all setup: http://code.google.com/apis/ajaxsearch/
var localSearch;
var map;
var icon;
var addressMarkerOptions;
google.load("search", "1");
google.load("maps", "2");
google.setOnLoadCallback(initialize);
function initialize()
{
localSearch = new GlocalSearch();
icon = new GIcon(G_DEFAULT_ICON);
addressMarkerOptions = { icon:icon , draggable: false};
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
plotAddress("OX4 1FJ");
}
/**
* This takes either a postcode or an address string
*
*/
function plotAddress(address)
{
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
var marker = new GMarker(point, addressMarkerOptions);
map.addOverlay(marker);
map.setCenter(point, 5, G_NORMAL_MAP);
}
else
{
alert('address not found');
}
});
localSearch.execute(address + ", UK");
}
I believe Live/Bing/Windows maps' API gives a much more accurate placement for a UK postcode than the Google maps API does.
Alternatively, there are databases of UK postcode data available, although they're quite costly. There are some interesting comments on this post: http://jamiethompson.co.uk/web/2008/07/24/full-uk-postcode-database-for-free/
I have an old gmaps application using V2 and I am trying to update it to v3.
I have a really simple problem, but I can't find a solution yet.
How can I strip the latitude and the longitude from the "event.latLng"?
It is returning a point(), but I need only the lat alone and the long for itself.
I cant get this to work.
According to the API for MouseEvents, event.latLng contains a LatLng, not a Point. If this is the case then you can use the lat() and lng() methods to get the values separately. If event.latLng is actually a Point then you can directly access the coordinates using the x and y properties (not methods).
What type of listener is creating the event?
Edit: there's an example in the tutorial of how to do what you want. It looks like you're following this already. Did you remember to include the actual placeMarker() function declaration?
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
Or are you not interested in placing a marker, and just want to get the lat and lng values? In that case, all you need is:
google.maps.event.addListener(map, 'click', function(event) {
var myLatLng = event.latLng;
var lat = myLatLng.lat();
var lng = myLatLng.lng();
})
I'm creating an array of information to populate markers using the Google Maps API.
How can I use the following script to add html to the markers?
The array while be built in a php loop.
var markers = [];
var title = [];
var point = new GLatLng(51.505804230524056,-0.11801719665527344);
marker = new GMarker(point);
map.addOverlay(marker);
markers[0] = marker;
title[0] = "marker 0";
var point = new GLatLng(51.45400691005981,-0.263671875);
marker = new GMarker(point);
map.addOverlay(marker);
markers[1] = marker;
title[1] = "marker 1";
If you are using v2.0 of the API? If so, I'd strongly recommend creating an RSS/XML/KML feed from your site and then using the GGeoXml class to create an overlay from that feed.
If you are using v3.0 of the API, then the GGeoXml class is not available, however, a the geoxml3 library has been developed to allow for just KML files.
That being said, if you want to directly add the markers in v2.0, you would call the bindInfoWindow, bindInfoWindowHtml, bindInfoWindowTabs or bindWindowInfoTabsHtml methods on the GMarker instances you are creating in order to set the HTML displayed when the marker is clicked.
In v3.0 of the API, you would create an instance of the InfoWindow class and then call the open method, passing the optional anchor parameter, which represents the MVCObject instance (which in this case is your Marker instance).