Important: Please read the Qt Code of Conduct -

Adding Marker in QT QML Map

  • Good day developers!

    What I want is to add multiple marker in my qml Map, the data display in map is based on the receive data using UDP Sockets. For now i have a running code that display one marker only, but my goal is send multiple data and display it in my map using one MapQuickItem only. Is that possible in QT QML?

    I'm using the code below


      int main(int argc, char *argv[])
     QGuiApplication app(argc, argv);
     qmlRegisterType<BackEnd>("io.qt.examples.backend", 1, 0, "BackEnd");
     QQmlApplicationEngine engine;
     return app.exec();

    udp.cpp //I'm using this code to receive data.

    ```  while (socket->hasPendingDatagrams()){
      QByteArray buffer;
      QHostAddress sender;
      quint16 port;
      hldr = tr("%1").arg(;
      QStringList list1 = hldr.split(',');
      strLat = list1[0];
      strLon = list1[1];
     qDebug() << "Latitude: " << strLat;
     qDebug() << "Longitude: " << strLon;
     qDebug()<<"Message From: " << sender.toString();
     qDebug()<<"With Port Number " << port;
     qDebug()<<"Message: " << buffer;
     emit vesselLatChanged();
     emit vesselLonChanged();
      QString BackEnd::vesselLat()
       m_vesselLat = strLat;
       qDebug() << m_vesselLat;
       return m_vesselLat;
     QString BackEnd::vesselLon()
       m_vesselLon = strLon;
       qDebug() << m_vesselLon;
       return m_vesselLon;
     QString BackEnd::vesselSpeed()
       m_vesselSpeed = strSpeed;
       qDebug() << m_vesselSpeed;
       return m_vesselSpeed;
    Map.qml //I'm using this code to display map.
      Window {
      id: root
       width: 300
       height: 480
       visible: true
       visibility: "Maximized"
       property double latitude: backend.vesselLat
       property double longitude: backend.vesselLon
       Plugin {
        id: mapPlugin
        name: "osm" 
       Map {
            id: map
            anchors.fill: parent
            plugin: mapPlugin
            center: QtPositioning.coordinate(59.14, 14.15) 
            zoomLevel: 15
          MapQuickItem {
             id: marker
             anchorPoint.x: image.width
             anchorPoint.y: image.height
             coordinate {
                    latitude: latitude
                    longitude: longitude
             sourceItem: Image {
                     id: image
                     source: "qrc:/resources/marker.png"

  • Why do you want to "display it in my map using one MapQuickItem only"? You will need to create multiple MapQuickItem instances to display multiple markers on map at once. You can create them statically (if their number is known in advance) or dynamically (if not).