I am using the below code to Plot a Route
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: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Using Polylines gives only Straight Lines is there any other method to Plot the Route as in the Sample Route Image.
I have tried regarding but didn't got any such method
Take a look here:http://www.geocodezip.com/v3_polyline_example_arc.html and here: http://www.geocodezip.com/v3_polyline_example_rhumb.html
To do this you probably want to abstract the path over a sinusoid of some kind to make it more curvy and visually attractive. Check out the question below, there are a lot of in-depth answers.
Curved line between two near points in google maps
Related
I want to implement below code in react. Where can I use 'script' tag and how can I draw below map. Is there any built-in Library for showing route on map
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
I suggest that you use the map component that is provided by primefaces primereact, it's functional and easily usable. Here is example taken from their: documentation:
import {GMap} from 'primereact/components/gmap/GMap';
onMapReady(event) {
this.setState({
overlays: [
new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
]
})
}
<GMap overlays={this.state.overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady}
onMapClick={this.onMapClick} onOverlayClick={this.onOverlayClick} onOverlayDragEnd={this.handleDragEnd} />
I have an array of coordinates in LatLng format. I would like to construct a polygon using those coordinates. I know I can hardcode a polygon with individual coordinates like this:
var triangleCoords = [
{lat: A, lng: A},
{lat: B, lng: B},
{lat: C, lng: C}]
Is it possible to place the LatLng data points from my array into triangleCoords and create the polygon that way?
Correct me if I had misunderstood your question.
Q:
Is it possible to place the LatLng data points from my array into triangleCoords and create the polygon that way?
A:
Short answer: No. Unfortunately there is no smartness in the google.maps.Polygon code which would magically try to figure out the lat and lng coordinates of the specified google.maps.LatLng objects for you.
You will need to use the lat() and lng() APIs to return the raw coordinate values from the google.maps.LatLng object and plug that into your array. No shortcut.
Example:
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 4,
center: new google.maps.LatLng(22.7964, 79.8456),
mapTypeId: google.maps.MapTypeId.HYBRID
});
var coordinateA = new google.maps.LatLng(18.979026,72.949219);
var coordinateB = new google.maps.LatLng(28.613459,77.255859);
var coordinateC = new google.maps.LatLng(22.512557,88.417969);
var coordinateD = new google.maps.LatLng(12.940322,77.607422);
var coords =
[
{lat: coordinateA.lat(), lng: coordinateA.lng() },
{lat: coordinateB.lat(), lng: coordinateB.lng() },
{lat: coordinateC.lat(), lng: coordinateC.lng() },
{lat: coordinateD.lat(), lng: coordinateD.lng() }
];
metros = new google.maps.Polygon(
{
paths: coords,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.26
});
See here for a working JSFiddle example.
http://jsfiddle.net/SamuelToh/3srggbmu/
Here same way am trying polygon google route map dynamically from mysql, it work only on marker, but its not working in polygon ,
here is the code
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 5,
center: { lat: 13.36, lng: 77.03 },
});
var planCoordinates = new Array();
// var locations = [
// {lat: 13.367797388285002, lng:77.03707749682616},
// {lat:13.341074247677549, lng:77.0394807561035},
// {lat:13.379153826558369, lng: 77.08685929614256},
// {lat: 13.367797388285002, lng:77.03707749682616},
// ];
<?php
if ($result->num_rows > 0)
{
foreach($result as $key => $row)
{
?>
var locations = [{lat: <?php echo $row['lat']; ?>,lng: <?php echo $row['lng']; ?>}];
for (let i = 0; i < locations.length; i++) {
let obj = locations[i];
planCoordinates[i] = new google.maps.LatLng(obj.lat, obj.lng);
var myLatlng = new google.maps.LatLng(obj.lat, obj.lng);
poly = new google.maps.Polygon({
path: planCoordinates,
geodesic: true,
strokeColor: 'hsla(290,60%,70%,0.3)',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: 'hsla(290,60%,70%,0.3)',
fillOpacity: 1.35
});
poly.setMap(map);
var infoWindow = new google.maps.InfoWindow({ content: contentString.this });
var marker = new google.maps.Marker({
position: myLatlng,
title: "Jumbookart",
zIndex: 999,
});
marker.setMap(map);
let ikonica = new google.maps.Marker({
position: myLatlng,
title: "Markeri",
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7
}
});
ikonica.setMap(map);
}
<?php } } ?>
var arrayOfFlightPlans = [locations];
//Loops through all polyline paths and draws each on the map.
for (let i = 0; i < arrayOfFlightPlans.length; i++) {
flightPath = new google.maps.Polygon({
path: arrayOfFlightPlans[i],
geodesic: true,
strokeColor: 'hsla(290,60%,70%,0.3)',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: 'hsla(290,60%,70%,0.3)',
fillOpacity: 1.35
});
flightPath.setMap(map);
}
}
I am having an intermittent issue where my Google Map will not load upon initially loading the webpage, causing a blank map. On refresh it will load without issue.
This is the error message I am getting in the Chrome console:
message: "initMap is not a function"
name: "InvalidValueError"
HTML for my map:
<div class="container-fluid">
<div id="map"> </div>
</div>
JavaScript:
function initMap() {
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: uluru,
//disableDefaultUI: true,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var triangleCoords = [
{lat: 28.0990114, lng: -82.0035785}, //Kathleen Rd - Lakeland
{lat: 28.0186323, lng: -82.11286410000002}, //Plant City
{lat: 27.8953038, lng: -81.97341719999997}, //Mulberry
{lat: 27.8964147, lng: -81.84313739999999}, //Bartow
{lat: 27.9014133, lng: -81.58590989999999},//Lake Wales
{lat: 28.1141841, lng: -81.61785359999999}, //Haines City
{lat: 28.1825147, lng: -81.8239676} //Polk City
];
var expressCoverage = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#333333',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#333333',
fillOpacity: 0.2
});
expressCoverage.setMap(map);
}
I've cleared the cache in my browser with no effect on the issue. The problem persists in Chrome, Mozilla and Mobile Safari. Could something be happening with the API Key when the map is not loading?
Perhaps the 'InvalidValueError' is arising because you aren't declaring 'uluru' with the correct format. Coordinates in the Google Maps API need to be in LatLng form. Try replacing
var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
with
var uluru = new google.maps.LatLng(28.0394654, -81.94980420000002);
I'm using squarespace to build my website and want to insert a custom map from google maps javascript api. I've followed tutorial from W3school and from Google's own tutorial to build my map and follow steps as below :
What I'm trying to archive is a map like this
google map example
Step 1: Insert a embed block for html
<div id= "map"></div>
Step 2: insert javascript in page header
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var 10th = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var 10th = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
10th.setMap(map);
}
</script>
Step 3 : in custom css section
#googleMap {
width: 100%;
height: 380px;
}
But so far, I got either a blank page once javascript injected or error page (with code visible on top of the page... )
Here the link to my webpage on SquareSpace https://handa-cheng-a3wm.squarespace.com/1starrondissement
Thanks !
You have few typos in your code:
var 10th = [...] // invalid variable name
^---
Variables names in JavaScript must not begin with numbers. And you have defined the function but didn't run it.
You have not set height for #map in css.
<div id= "map"></div>
#googleMap { // <== this is not correct id as used in html above
width: 100%;
height: 380px;
}
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 48.877412, lng: 2.359221},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Define the LatLng coordinates for the polygon's path.
var points = [
{lat: 48.883863, lng: 2.349500},
{lat: 48.870752, lng: 2.347915},
{lat: 48.867593, lng: 2.363981},
{lat: 48.872958, lng: 2.377065},
{lat: 48.877800, lng: 2.370605},
{lat: 48.882765, lng: 2.370164},
{lat: 48.884218, lng: 2.368480},
{lat: 48.884670, lng: 2.360258},
{lat: 48.883863, lng: 2.349500}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon.setMap(map);
}
initMap();
#map {
height: 300px;
}
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<div id="map"></div>
I'm trying to code 2 independent snapped-to-road polygons created from 2 different arrays of lat lon points. When I change the code to only do one polygon, it looks great. But when I change the code to do both polygons, I get different polygons than I had seen when I had done one at a time. Also, I've noticed that the 2nd polygon no longer snaps-to-roads like it should and like I've seen when only coding for one polygon.
I'm pretty confused by this.. It seems like the JS API is struggling to put the polygon together and snap to roads. Is it too many lat/lon points?
I appreciate any and all help. Please don't hesitate to ask if I'm not providing enough info.
Here is my code:
<script>
function initMap() {
var pos = {lat: 29.744860,lng: -95.361302};
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
roadTrip1 = [
{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination:
roadTrip1[j+1],travelMode:
google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714},
{lat: 29.753679, lng: -95.354992},
{lat: 29.770151, lng: -95.350105},
{lat: 29.813047, lng: -95.399361},
{lat: 29.780510, lng: -95.501962},
{lat: 29.731015, lng: -95.501280},
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},
{lat: 29.693119, lng: -95.413344},
{lat: 29.701318, lng: -95.374242},
{lat: 29.704807, lng: -95.374714}
];
var traceroadtrip2 = new google.maps.Polygon({
path: roadtrip2,
strokeColor: '#5c6670',
strokeOpacity: 0.8,
strokeWeight: 4,
fillColor: '#5c6670',
fillOpacity: 0.25
});
var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
service2.route({origin: roadtrip2[j],destination: roadtrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceroadtrip2.setPath(snap_path2);
}
});
}
};
window.onload = function() { initMap();};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>
Your code is getting status OVER_QUERY_LIMIT and silently failing, if you add an alert when it fails, you will see the failures:
if(status == google.maps.DirectionsStatus.OK) {
//...
} else alert("directions service 2 failed:"+status);
fiddle with added alert code
modify your code to handle the query limit, see this related question:
OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? (regarding the geocoder, but a similar strategy will work for the directions service)