Google Maps is a great navigation app, with no frills really needed. It is, in fact, easily one of the best navigation apps around, without even beginning to consider the extras. But that doesn’t mean that there are no frills to be found. Aside from the ability to go into Dark Mode and a few other options, you can even go so far as to customize your car icon in Google Maps, in fact. Show Specifically, this changes the icon representing your location. By default, that’s an arrow icon that’s reminiscent of the classic arcade title “Asteroids.” Unless you’re in motion, that may also show up as a simple round, circle icon. In either case, Google has colored the icon blue by default and it’s easy to spot. Now, as a result, this doesn’t do much for the user experience. And there aren’t any functionality changes to note, either. In fact, the customization itself is rather limited. That’s ignoring the odd partnership and associated changes Google makes from time to time — typically, as an easter egg — to make things even better. But we’ll discuss that momentarily. Advertisement In the interim, if you’ve been looking to make your experience more personal, Google Maps has options. And this guide sets out to show you how to customize your car icon. So if that sounds appealing to you, read on. Here’s how to change your car icon in Google MapsBefore getting started, it’s worth noting a few caveats and quirks about this feature. First, while this works on mobile and tablets, it isn’t going to work outside of the mobile app. So, for instance, you won’t be able to change the icon this way using the website for Google Maps. Equally as important, this change only works for navigation by car. It doesn’t apply to travel by train, bus, or other public transport. So, if you use Google Maps to travel by those means, this customization won’t apply to you. Advertisement As noted above, there are also always potentially additional options for changing the icon, such as the Nintendo partnership noted above. That partnership opened up, temporarily, an option to show the company’s mascot driving his iconic Go-Kart around instead of the standard icons. That isn’t available as of this writing, but new options are sometimes if rarely or temporarily, added. So it’s worth keeping an eye out for those but not necessarily to expect them. This tutorial teaches you how to change the icon of a Google maps marker. It is beneficial to know the basics of creating markers when using this tutorial. Note: You can use standard and custom marker icons from the Google Earth/Maps Icons collection.The following map is an example of a map that uses customized markers. The section below lists all of the code that you need to create the map in this tutorial.
JavaScriptlet map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;Note: The JavaScript is compiled from the TypeScript snippet.CSS/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML<html>
<head>
<title>Custom Markers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>Try SampleStackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell Customizing a map markerThe image below displays a Google maps marker with the default red icon.  You can change this icon to an image of your choice. The table below explains the code that customizes the default marker to use an icon for parking lots.Code and description ________4Adds the icon property to the MarkerOptions object, to change the marker’s icon.The icon property can be either a string (the URL to the marker icon), or an let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;0 object.See the customized marker icon below. Customizing markers by map featuresEach point of interest in the list of campus features has a let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;1 attribute. Notice how the code extract below specifies the let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;2, let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;3 and let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;4 types. You can customize the marker icon depending on the map feature let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-33.91722, 151.23064),
zoom: 16,
});
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
const features = [
{
position: new google.maps.LatLng(-33.91721, 151.2263),
type: "info",
},
{
position: new google.maps.LatLng(-33.91539, 151.2282),
type: "info",
},
{
position: new google.maps.LatLng(-33.91747, 151.22912),
type: "info",
},
{
position: new google.maps.LatLng(-33.9191, 151.22907),
type: "info",
},
{
position: new google.maps.LatLng(-33.91725, 151.23011),
type: "info",
},
{
position: new google.maps.LatLng(-33.91872, 151.23089),
type: "info",
},
{
position: new google.maps.LatLng(-33.91784, 151.23094),
type: "info",
},
{
position: new google.maps.LatLng(-33.91682, 151.23149),
type: "info",
},
{
position: new google.maps.LatLng(-33.9179, 151.23463),
type: "info",
},
{
position: new google.maps.LatLng(-33.91666, 151.23468),
type: "info",
},
{
position: new google.maps.LatLng(-33.916988, 151.23364),
type: "info",
},
{
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: "parking",
},
{
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: "parking",
},
{
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: "parking",
},
{
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: "library",
},
];
// Create markers.
for (let i = 0; i < features.length; i++) {
const marker = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
map: map,
});
}
}
window.initMap = initMap;1 you set it to.
How do I change the icon for my business on Google Maps?How do I change my Google My Business logo?. Visit business.google.com.. Click on your business profile.. On the bottom left, click “Website.. On the right click “Edit Header Photo”. Upload or drag the desired photo/logo.. That's it.. How do I get icons on Google Maps?Click the name of the pin you've just added on the menu panel on the upper left corner of the web page, and click the paint bucket icon next to it. A small dialog box with a color picker will appear. Click “More Icons” on the box, and a larger dialog box labeled “Choose your icon” will show.
Can you get more vehicle icons for Google Maps?Aside from the ability to go into Dark Mode and a few other options, you can even go so far as to customize your car icon in Google Maps, in fact.
|
How to change icon on google maps
Related Posts
Copyright © 2024 en.idkuu.com Inc.
