I try to create a marker with a custom icon with NativeScript and the Google maps API package. I added my icon to the android resources and then built my project a few times.

   var marker = new mapsModule.Marker();
   marker.position = mapsModule.Position.positionFromLatLng(result.latitude, result.longitude);
   marker.title = "Home";
   var icon = new Image();
   icon.imageSource = imageSource.fromResource('bot_marker');
   marker.icon = icon;
   marker.snippet = "This is where I live";
   marker.userData = { index: 1 };
   mapView.addMarker(marker);

Even when I try icon or logo for the ressource it doesn't appear.

I try to create a marker with a custom icon with NativeScript and the Google maps API package. I added my icon to the android resources and then built my project a few times.

   var marker = new mapsModule.Marker();
   marker.position = mapsModule.Position.positionFromLatLng(result.latitude, result.longitude);
   marker.title = "Home";
   var icon = new Image();
   icon.imageSource = imageSource.fromResource('bot_marker');
   marker.icon = icon;
   marker.snippet = "This is where I live";
   marker.userData = { index: 1 };
   mapView.addMarker(marker);

Even when I try icon or logo for the ressource it doesn't appear.

• javascript
• android
• google-maps
• nativescript

Share Improve this question Follow edited Apr 16, 2018 at 12:26 zdenek 24.6k22 gold badges1818 silver badges3535 bronze badges asked Nov 26, 2016 at 2:32 FreshchrisFreshchris 1,25144 gold badges1919 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Using Angular2

import { Image } from "ui/image";
import { ImageSource } from "image-source";

    onMapReady(event) {
        console.log("Google map is ready!");

        var mapView = event.object;
        var marker = new Marker();
        marker.position = Position.positionFromLatLng(this.state.latitude, this.state.longitude);

        let imgSrc = new ImageSource();
        imgSrc.fromResource("pink_pin_dot");

        let image = new Image();
        image.imageSource = imgSrc;

        marker.icon = image;
        mapView.addMarker(marker);
    }

Using Vue this worked for me.

Note 1: fromResource and fromFile have been deprecated and new functions are called fromFileSync and fromResourceSync

Note 2: Do not change marker color after setting the icon, this will show you the default icon although you would have set ImageSource for custom icon correctly

1 ) import required NativeScript libraries

import { Image } from "ui/image";
import { ImageSource } from "image-source";
import { Marker } from "nativescript-google-maps-sdk";

2 a) Add custom marker image using local path

 const marker = new Marker()
 const imageSource = ImageSource.fromFileSync( "~/assets/images/icons/icon.png");
 const icon = new Image();
 icon.imageSource = imageSource;
 marker.icon = icon;

OR

2 b) Add custom marker image using resources (in Android for example these live in drawable folders in app/App_Resources/Android/src/main/res, here the example image is icon.png)

 const marker = new Marker()
 const imageSource = ImageSource.fromResourceSync("icon");
 const icon = new Image();
 icon.imageSource = imageSource;
 marker.icon = icon;

In Nativescript version 6 i used the following code to make it work with local image file.

import {ImageSource} from "tns-core-modules/image-source";
import { Image } from "tns-core-modules/ui/image";
import {Folder, path, knownFolders} from "tns-core-modules/file-system"; 

/** Then in the point of adding the marker **/
const folder: Folder = <Folder>knownFolders.currentApp();
const folderPath: string = path.join(folder.path, "images/marker-blue.png");
const imageFromLocalFile: ImageSource = ImageSource.fromFileSync(folderPath);
let image = new Image();
image.imageSource = imageFromLocalFile;
marker.icon = image;