This is my GeoJson :
{ "type" : "FeatureCollection", "created" : "2014/07/08 03:00:55 GMT", "announced_date" : "2017/07/10 03:00:55 GMT", "features" : [{ "type" : "Feature", "properties" : { "name" : "n18", "analized_date" : "2013/07/08 10:00:00 GMT" }, "geometry" : { "type" : "GeometryCollection", "geometries" : [{ "type" : "Point", "coordinates" : [134.7, 37.3] }, { "type" : "LineString", "coordinates" : [[134.7, 37.3], [134.6, 37.1]] } ] } }] }
I can display it in normal line but I want display as dashed line . I google and there is a way : use Polyline but I don't know how to convert it to Polyline .
Please help . Thank you :) .
To make the poly line dashed, you have to create a native google.maps.Polyline object. One way to do that is to use the data layer to load the GeoJSON, then use its methods to create the polyline from the GeoJSON:
code snippet:
function initialize() { // Create a simple map. map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 8, center: { lat: 37, lng: 134 } }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // process the loaded GeoJSON data. google.maps.event.addListener(map.data, 'addfeature', function(e) { if (e.feature.getGeometry().getType() === 'GeometryCollection') { var geometry = e.feature.getGeometry().getArray(); for (var i = 0; i < geometry.length; i++) { if (geometry[i].getType() === 'Point') { map.setCenter(geometry[i].get()); new google.maps.Marker({ map: map, position: geometry[i].get() }); } else if (geometry[i].getType() === 'LineString') { new google.maps.Polyline({ map: map, path: geometry[i].getArray(), // make the polyline dashed. From the example in the documentation: // https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed strokeOpacity: 0, icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }] }) } } } map.data.setMap(null); }); map.data.addGeoJson(data); } google.maps.event.addDomListener(window, 'load', initialize); var data = { "type" : "FeatureCollection", "created" : "2014/07/08 03:00:55 GMT", "announced_date" : "2017/07/10 03:00:55 GMT", "features" : [{ "type" : "Feature", "properties" : { "name" : "n18", "analized_date" : "2013/07/08 10:00:00 GMT" }, "geometry" : { "type" : "GeometryCollection", "geometries" : [{ "type" : "Point", "coordinates" : [134.7, 37.3] }, { "type" : "LineString", "coordinates" : [[134.7, 37.3], [134.6, 37.1]] } ] } }] };
html, body { height: 100%; margin: 0px; padding: 0px; width: 100%; } #map-canvas { height: 100%; width: 100%; }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>
