How to display the direction properly by bounding the map with 2 cities with google map in Qt?

Question

Hi,

I have tried with the following code to properly display the direction line between 2 cities, however the line between 2 cities is not properly set. If distance between 2 cities is long enough then one city icon is displayed and to get see the other city icon displayed on the map, I have to go to the place.

please check the code below:

void ShowDirection::on_webView_loadFinished(bool)
{

    QStringList scriptStr;
    scriptStr
            << "var map = new google.maps.Map2(document.getElementById(\"map\"));"
            << "var bounds = new GLatLngBounds();"
            << "var colors = ['#FF0000'];"
            << "var baseStartIcon = new GIcon();"
            << "var baseEndIcon = new GIcon();"
            << "baseStartIcon.image = 'qrc:images/green.png';"
            << "baseEndIcon.image = 'qrc:images/red.png';"
            << "baseStartIcon.iconSize = new GSize(37, 37);"
            << "baseEndIcon.iconSize = new GSize(37, 64);"
            << "baseStartIcon.iconAnchor = new GPoint(18, 37);"
            << "baseEndIcon.iconAnchor = new GPoint(0, 64);"
            << "map.addControl(new GLargeMapControl());"
            << "var directions = new GDirections();"
            << "GEvent.addListener(directions,\"load\", function() {"
            << "var poly=directions.getPolyline();"
            << "map.setCenter(poly.getVertex(0),8);"
            << "map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));"
            << "map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));"
//            << "bounds.extend(poly.getBounds());"
//            << "map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));"
            << "poly.setStrokeStyle({color:colors[0],weight:3,opacity: 0.7});"
            << "map.addOverlay(poly);"
            << "});"


    << QString ("directions.loadFromWaypoints([\"%1\",\"%2\"],{getPolyline:true});")
                                .arg(fromCurrentLocationShowDirection)
                                .arg(toEventLocationShowDirection);
    ui->webView->page()->mainFrame()->evaluateJavaScript(scriptStr.join("\n"));
}

How to bound the 2 city locations direction line on the map, so that whatever may be the distance both location directions display on the map.

Thanks...

Answer 1

After modifying the code it's working now:

void ShowDirection::on_webView_loadFinished(bool)
{

    QStringList scriptStr;
    scriptStr
            << "var map = new google.maps.Map2(document.getElementById(\"map\"));"
            << "var bounds = new GLatLngBounds();"
            << "var colors = ['#FF0000'];"
            << "var baseStartIcon = new GIcon();"
            << "var baseEndIcon = new GIcon();"
            << "baseStartIcon.image = 'qrc:images/currentlocation-green.png';"
            << "baseEndIcon.image = 'qrc:images/iPhone_redFlag-events.png';"
            << "baseStartIcon.iconSize = new GSize(37, 37);"
            << "baseEndIcon.iconSize = new GSize(37, 64);"
            << "baseStartIcon.iconAnchor = new GPoint(18, 37);"
            << "baseEndIcon.iconAnchor = new GPoint(0, 64);"
            << "map.addControl(new GLargeMapControl());"
            << "var directions = new GDirections();"
            << "GEvent.addListener(directions,\"load\", function() {"
            << "var poly=directions.getPolyline();"
            << "bounds.extend(poly.getVertex(0));"
            << "bounds.extend(poly.getVertex(poly.getVertexCount()-1)); "
            << "map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));"
            << "map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));"
            << "map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));"

            << "poly.setStrokeStyle({color:colors[0],weight:3,opacity: 0.7});"
            << "map.addOverlay(poly);"
            << "});"


    << QString ("directions.loadFromWaypoints([\"%1\",\"%2\"],{getPolyline:true});")
                                .arg(fromCurrentLocationShowDirection)
                                .arg(toEventLocationShowDirection);
    ui->webView->page()->mainFrame()->evaluateJavaScript(scriptStr.join("\n"));
}

This would be useful for anybody, who wants to display GDirection with colorful poly line with custom Icons.