How to make google Map Api polyline with pin?

Question

I've been created polyline maps like this

but I want set pin in every point... like this one :

How i can do that?

this is my javascript's code...

<script>
        latawal = <?php echo json_encode($locationawal['lat'])?>;
        longawal = <?php echo json_encode($locationawal['lon'])?>;

        var GoogleMaps = function () {
            var mapPolylines = function() {
                var map = new GMaps({
                    div: '#gmap_polylines',
                    lat: latawal,
                    lng: longawal,
                    click: function(e){
                      console.log(e);
                    }
                  });

                    path = [
                        <?php foreach ($locationawal10 as $row){ ?>
                            [<?php echo json_encode($row['lat'])?>, <?php echo json_encode($row['lon'])?>],
                        <?php } ?>
                    ];

                  map.drawPolyline({
                    path: path,
                    strokeColor: 'Red',
                    strokeOpacity: 0.6,
                    strokeWeight: 4
                });
            }
            return {
                //main function to initiate map samples
                init: function () {
                    mapPolylines();
                }

            };

        }();
    </script>

Thanks before.... I hope someone can help me about this... sorry for my bad english..

What are `latawal`, `lngawal`, and `path`? Please provide a [Minimal, Complete, Tested and Readable example](Minimal, Complete, Tested and Readable example) that demonstrates the issue. — geocodezip, Jun 27 '16 at 11:28

score 1 · Answer 1 · edited May 23 '17 at 10:27

It seems you need to make multiple markers. You will be using the latlang values from your latawal and longawal json files for each marker as LatLng values for the markers. Check this SO thread for additional reference. I did a quick demo for you to convey the idea. You may need to modify parts which needs cleaner coding. This is the relevant part:

 function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var flightPlanCoordinates = [
          {lat: -32.342841, lng: 119.882813},
          {lat: -32.194209, lng: 144.492188},
          {lat: -19.248922, lng: 145.546875},
          {lat: -18.916680, lng: 124.804688}
        ];

        var markerCoordinates = [
          [-32.342841, 119.882813],
          [-32.194209, 144.492188],
          [-19.248922, 145.546875],
          [-18.916680, 124.804688]
         ];

      var marker, i;

    for (i = 0; i < markerCoordinates.length; i++) {  

      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(markerCoordinates[i][i-i], markerCoordinates[i][1]),
          map: map,
          title: 'Hello World!'
        });
     }  

     var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }

This is what it looks like:

It would defintely help if you read the docs about Markers too.

score 0 · Answer 2 · answered Jun 27 '16 at 11:32

Simplest solution is to process the path and add markers at each vertex.

 for (var i=0; i<path.length; i++) {
   map.addMarker({
     lat: path[i].lat,
     lng: path[i].lng,
   })
 }

proof of concept fiddle

code snippet:

function initialize() {
  latawal = 41.5;
  longawal = -72.4;

  var GoogleMaps = function() {
    var mapPolylines = function() {
      var map = new GMaps({
        div: '#gmap_polylines',
        lat: latawal,
        lng: longawal,
        zoom: 8,
        click: function(e) {
          console.log(e);
        }
      });

      path = [{
        lat: 42,
        lng: -72
      }, {
        lat: 41,
        lng: -72.4
      }, {
        lat: 41.5,
        lng: -72.6
      }];

      map.drawPolyline({
        path: path,
        strokeColor: 'Red',
        strokeOpacity: 0.6,
        strokeWeight: 4
      });
      for (var i = 0; i < path.length; i++) {
        map.addMarker({
          lat: path[i].lat,
          lng: path[i].lng,
        })
      }
    }
    return {
      //main function to initiate map samples
      init: function() {
        mapPolylines();
      }
    };
  }();
  GoogleMaps.init();
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#gmap_polylines {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div id="gmap_polylines"></div>

How to make google Map Api polyline with pin?

2 Answers2