This is the simplest I could reduce it to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
👨💻 Edit/fork on a Codepen →
SCREENSHOT
There is some closure magic happening when passing the callback argument to the addListener
method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:
❯ Mozilla Dev Center: Working with Closures
Flutter Launcher Icons has been designed to help quickly generate launcher icons for both Android and iOS: https://pub.dartlang.org/packages/flutter_launcher_icons
- Add the package to your pubspec.yaml file (within your Flutter project) to use it
- Within pubspec.yaml file specify the path of the icon you wish to use for the app and then choose whether you want to use the icon for the iOS app, Android app or both.
- Run the package
- Voila! The default launcher icons have now been replaced with your custom icon
I'm hoping to add a video to the GitHub README to demonstrate it
Video showing how to run the tool can be found here.
If anyone wants to suggest improvements / report bugs, please add it as an issue on the GitHub project.
Update: As of Wednesday 24th January 2018, you should be able to create new icons without overriding the old existing launcher icons in your Flutter project.
Update 2: As of v0.4.0 (8th June 2018) you can specify one image for your Android icon and a separate image for your iOS icon.
Update 3: As of v0.5.2 (20th June 2018) you can now add adaptive launcher icons for the Android app of your Flutter project
Best Answer
TL;DR: As long as are able to encode any image into raw bytes such as
Uint8List
, you should be fine using it as a marker.As of now, you can use
Uint8List
data to create your markers with Google Maps. That means that you can use raw data to paint whatever you want as a map marker, as long as you keep the right encode format (which in this particular scenario, is apng
).I will go through two examples where you can either:
Besides this, you can even transform a render widget in an static image and thus, use it as marker too.
1. Using an asset
First, create a method that handles the asset path and receives a size (this can be either the width, height, or both, but using only one will preserve ratio).
Then, just add it to your map using the right descriptor:
This will produce the following for 50, 100 and 200 width respectively.
2. Using canvas
You can draw anything you want with canvas and then use it as a marker. The following will produce some simple rounded box with a
Hello world!
text in it.So, first just draw some stuff using the canvas:
and then use it the same way, but this time providing any data you want (eg. width and height) instead of the asset path.
and here you have it.