I´m using the framework openui5-googlemaps for using google maps in a sapui5 application.
I have an array of lat/lng positions. I want to draw a line from position to position in this array.
I found an example with directions:
<gmaps:directions>
<gmaps:Directions startAddress="{mapModel>/start}" endAddress="mapModel>/end}" unitSystem="1" waypoints="{mapModel>/stops}">
<gmaps:waypoints>
<gmaps:Waypoint location="{mapModel>/name}"></gmaps:Waypoint>
</gmaps:waypoints>
</gmaps:Directions>
</gmaps:directions>
The problem on this solution is, that I don´t want a marker on each position.
(My positions have a distance of a few metres.)
Further this solution draws the lines based on the streets. I need a solution regardless of streets.
If you want to see example using Polylines see Sample App2
Let me know if you want an standalone example by adding an issue to the repo
[UPDATE]
here is a sample app using polylines
<openui5.googlemaps:Map id="map1" lat="{/beaches/1/lat}" lng="{/beaches/1/lng}" >
<openui5.googlemaps:polylines>
<openui5.googlemaps:Polyline path="{/beaches}" />
</openui5.googlemaps:polylines>
</openui5.googlemaps:Map>
running looks like
Related
I am using angular2-google-maps plugin with angular2
I have 2 points A & B.
I am simply trying to draw a polyline, but it draws a straight line instead of proper driving directions route.
Here is my plunker:
http://plnkr.co/edit/Uz8Dz0zB4Ea8CJTe6wYM?p=preview
Main Code:
<sebm-google-map [latitude]="49.0096941" [longitude]="2.5457305" [zoom]="10">
<sebm-google-map-polyline>
<sebm-google-map-polyline-point [latitude]="49.0096941" [longitude]="2.5457305">
</sebm-google-map-polyline-point>
<sebm-google-map-polyline-point [latitude]="48.9688538" [longitude]="2.5375751">
</sebm-google-map-polyline-point>
</sebm-google-map-polyline>
</sebm-google-map>
Can anyone identify the issue if any? because I am following the docs
You'll need to call the Directions Service to get driving directions between those two coordinates, the response will include a polyline which you can display on a map.
angular2-google-map doesn't include directive for the directions service itself, but I see plenty of example directives available in this github issue which should point you in the right direction.
http://www.amcharts.com/demos/selecting-multiple-areas-map/
Please see the above link map i want to make something like this could anyone please share the details of how i could make it moreover i have to make for my particular state how i could do all this.
I have tried few things with google fusion tables but didnt able to get this layout and the js file used in this is different how i can make my own
Thanks
There are certain steps that you need to follow to make this feature work:
First you have to define the borders of all the US states. This can be obtained by passing the lat/lng values of the borders. Please refer to this JS file which has the Lat/Lng of US states along the border. Draw Polygon using code.
var statesobj = {"AK": [new google.maps.LatLng(70.0187, -141.0205),
new google.maps.LatLng(70.1292, -141.7291),
new google.maps.LatLng(70.4515, -144.8163)]}
So, it's easy now. Loop on these lat/longs. And you can draw the polygons on every state of US.
Secondly, Consider all the regions/states drawn on the Google Maps as polygon. Then you have to pass to the polygon object a new PolygonOptions by calling this method:
setOptions(options:PolygonOptions).
You can see the different options here: http://code.google.com/apis/maps/documentation/javascript/reference.html#PolygonOptions
In this PolygonOptions you can then specify the color you want the Polygon to be filled with along with all the other stuff you could want to change.
You can also set the click to zoom in. That can be done using
map.setCenter(Polygon.getPosition()); //Polygon is Polygon to center on
map.setZoom(map.getZoom() + 1);
I've developed a HTML application that displays a map. This map has many fixed markers (they do not change in time).
Due to that:
I want to speed up the application
I want to hide the marker position from malicious users (so they can't use the information I've gathered for they're own porpose)
I want to convert the markers to a tile layer.
I've been googleing without success how to do this. Anyone has faced this problem and has a nice easy solution?
Thanks!
If the markers never change, there is a great solution:
Mapbox.
You can create your map with the markers, then the mapbox servors will send the tiles with the markers.
You can use a quadkey. It'similar to a quadtree. You can download my PHP class hilbert-curve # phpclasses.org. It also uses a quadkey.
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!
Is there an API I can use to draw a straight line between two points in a Google map, and to show the line in different colors?
Example: draw a straight line between NYC and Los Angeles with green or red line?
Yes. Have you checked out the Google Maps APIs?
For example check out the source code for this example
Check this out, http://www.birdtheme.org/useful/v3tool.html. This application uses the Google Maps API Version 3 (V3). When you draw the line between two cities, this tool will auto generate kml or javascript code for you, and you can import it into your website and load the map
Using Polylines, you can draw a straight line.
You can see an example here
This worked for me. With the method mentioned here I was able to draw polylines on Google Maps V2. You can easily change color and width of these polylines. I drew a new line whenever the user location got changed, so the the polyline looks like the path followed by user on map.
Source code at. Github Repository: prasang7/eTaxi-Meter
Please ignore other modules of this project related to distance calculation and User Interface if you are not interested in them.