How to set different icons on the map at the beginning and end of the route?

Question

How to set different icons on the map at the beginning and end of the route?

Navigation

#1 by (1 votes)

0

I'm developing tracking system and I need it when checking the route where the vehicle went. I want start and end point to be identified with another icon as image. Here's also PHP code:

    while($RS= mysql_fetch_array($RSS)){
    $x = $x + 1;
    $kx .= "new google.maps.LatLng(".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"])."),";

    if($RS["ig"] == "1"){$ig="LIGADA";}else{$ig="DESLIGADA";}
    if($x == 1){$pt = $pt . chr(91)."'INICIO: ".date("d/m/Y H:i:s", strtotime($RS["dt_hora"]))." - ".$RS["ds_posicao"]." | Ig: ".$ig."', ".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"]).", ".$x."],";}else{$pt = $pt . chr(91)."' ".date("d/m/Y H:i:s", strtotime($RS["dt_hora"]))." - ".$RS["ds_posicao"]." | Ig: ".$ig."', ".str_replace(",", ".", $RS["vl_latitude"]).", ".str_replace(",", ".", $RS["vl_longitude"]).", ".$x."],";}
    $adata  = $RS["dt_hora"];
    if($RS["ig"] == "1"){$aig="LIGADA";}else{$aig="DESLIGADA";}
    //$aig  = $RS["ig"];
    $apos   = $RS["ds_posicao"];
    $alat   = $RS["vl_latitude"];
    $alng   = $RS["vl_longitude"];
}
$pt = $pt . chr(91)."'FIM: ".date("d/m/Y H:i:s", strtotime($adata))." - ".$apos." | Ig: ".$aig."', ".str_replace(",", ".", $alat).", ".str_replace(",", ".", $alng).", ".$x."],";

Function to create Marker :

function setMarkers(map, locations) {
    var image = new google.maps.MarkerImage('../../imagens/car_mini.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(0, 10));
    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18, 1],
        type: 'poly'
    };

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}

php javascript google-maps google-maps-api-3

asked by anonymous 29.08.2017 / 05:06

1 answer

Write app data developed with react-native to a remote PostgreSQL database XMLHttpRequest can not load in Vue js

score 1 · Accepted Answer

Just create a different Marker within the loop repeat creating a condition to identify which first and last recorded coordinates. Here's how your code should look:

var image = new google.maps.MarkerImage('../../imagens/car_mini.png',
  new google.maps.Size(20, 32),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 10));

var outraImagem = new google.maps.MarkerImage('../../imagens/car.png',
  new google.maps.Size(20, 32),
  new google.maps.Point(0,0),
  new google.maps.Point(0, 10));

var shape = {
  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};

for (var i = 0; locations.lenght; i++) {

    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

    // aqui é a primeira posição
    if (i == 0) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: outraImagem,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }

    // aqui é a ultima posição
    if (i == (locations.length - 1)) {
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: outraImagem,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}