i want to draw a polygon on the trigger of certain function. i have created a button submit which initiate the insert function which got coordinates from the user and call display function.
var map; var triangleCoords = [];
function insert() {
//var markerImage = 'assets/img/marker.png';
// var marker = new google.maps.Marker({
// position: location,
// map: map,
// icon: markerImage
// });
triangleCoords = [
[30.983611, 73.332778],
[30.93361111, 73.33055556],
[30.93361111, 73.43055556],
[30.98111111, 73.42944444]
];
display();
}
function display()
{
function initMap() {
var location = new google.maps.LatLng(31.1704, 72.7097);
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: location,
zoom: 7,
panControl: false
// mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var points = [];
for (var i = 0; i < triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
zoom: 13,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window,'load',initMap);
}
code is working fine but if i remove google.maps.event.addDomListener(window,'load',initMap); line map doesnot display. my submit button clears the forms.
Related
Below is a map to demonstrate the type of output I would like to achieve.
However, when I fetch the coordinates from the database I don't know how to draw them on Google Maps in order to get this type of output. I use this code but I don't how to put coordinates in this code from the database.
var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]';
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
if (jQuery('#map').length > 0) {
var locations = jQuery.parseJSON(MapPoints);
window.map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var infowindow = new google.maps.InfoWindow();
var flightPlanCoordinates = [];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
map: map
});
flightPlanCoordinates.push(marker.getPosition());
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i]['title']);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You're adding markers to the map so you can extract their coordinates to make a polyline. You can cut out the middleman and use the LatLngs to make the polyline.
$('document').ready(function() {
initialize();
});
// You don't need google.maps.event.addDomListener(window, 'load', initialize);
// if you use jQuery's $(document).ready() function.
function initialize() {
var flightPathCoordinates = [];
// Get the data from the server.
$.get(
"url/of/serverScript.php", // Wherever you're getting your var MapPoints JSON.
function(response) {
var locations = $.parseJSON(response);
var coordinatePair;
for (i = 0; i < locations.length; i++) {
coordinatePair = new google.maps.LatLng(locations[i].address.lat,
locations[i].address.lng);
flightPathCoordinates.push(coordinatePair);
}
}); // end $.get()
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
// Create the polyline.
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
// Add it to the map.
flightPath.setMap(map);
}
Note: You can use $ instead of jQuery. e.g. these are equivalent: jQuery('#map') $('#map')
I use google map to show markers,
then I want to use polyline to link markers one by one.
but polyline doesn't showing.
my code as below:
$(document).ready(function (){
/*map initial*/
var mapOptions = {
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
paths: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
}
screen capture picture
any one help?
thanks a lot.
The issue with your code is that a google.maps.PolylineOptions object doesn't have a paths property (a google.maps.Polygon does), it has a path property.
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
If I fix that, and the javascript errors in the posted code:
Uncaught ReferenceError: arr_markers is not defined
Uncaught ReferenceError: arr_user_location_polyline is not defined
I get a polyline: proof of concept fiddle
code snippet:
$(document).ready(function() {
var arr_markers = [];
var arr_user_location_polyline = [];
/*map initial*/
var mapOptions = {
center: {
lat: 21.291,
lng: -157.821
},
zoom: 3
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
});
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
So I am trying to draw multiple separated polylines on google map.
So far I don't have so much:
<script>
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
map: map
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412']
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685']
function initialize() {
for (var i=0; i < end.length; i++){
calcRoute(start[i], end [i]);
}
}
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
</script>
I found here an interesting example, but it has DirectionsTravelMode, and I want only a straight line between two points.
So in my example I would like to have 4 not connected straight lines drawn on the map.
a google.maps.LatLng object is two numbers; or a google.maps.LatLngLiteral is a javascript object with a lat and a lng property, neither is a string.
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
you need to add those to the polyline's path:
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
proof of concept fiddle
code snippet:
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
]
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
]
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
}
function calcRoute(source, destination) {
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Nice answer by geocodezip !
A small improvement, instead of adding many polyline elements to your map (which could later require you to keep track of them & iterate over all of them in order to remove or change them), you can put all paths in one Polygon object.
working fiddle: http://jsfiddle.net/syoels/hyh81jfz/1/
(i took geocodezip's fiddle and made small changes)
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
];
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
];
var paths = [];
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map"></div>
This is an example from my jsonData:
"lineformap":"new google.maps.LatLng(52.25602231800669, 6.160540580749512),new google.maps.LatLng(52.25543780780041, 6.1602723598480225),new google.maps.LatLng(52.255818725438296, 6.160014867782593)"
and this is my code:
(no line appears)
When i copy the data in to the code the lines are visable on the map
Who can help me with this
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(52.2554, 6.1627);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("ObjectMap"), myOptions);
$.getJSON('/api/dbklineforbws', function (createbws) {
$(createbws).each(function (i, itemb) {
// Define the LatLng coordinates for the polygon's path.
var flightPlanCoordinates = [
itemb.lineformap
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
For me it's very strange usage of json file. But, to make it work I'd change json file to:
{
"lineformap": "[new google.maps.LatLng(52.25602231800669, 6.160540580749512),new google.maps.LatLng(52.25543780780041, 6.1602723598480225),new google.maps.LatLng(52.255818725438296, 6.160014867782593)]"
}
and
var flightPlanCoordinates = [
itemb.lineformap
];
to
var flightPlanCoordinates = eval(itemb.lineformap);
to get polyline.
I am new at Google Map applications. I have read an article about Polyline Arrays (https://developers.google.com/maps/documentation/javascript/overlays#PolylineArrays). In the example, it created a dynamic arrays using Event Click. My question is, is it possible that i can create a polyline in an array variable not on a click event?
Here is the code from google documentation:
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
I have made some of my own code:
<script>
var line;
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, -180),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var path = [new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856)];
line = new google.maps.Polyline({
path: path,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map)
}
function addNewPoint(position) {
var path = line.getPath();
path.push(position);
}
''''' I create a single variable for a new path.
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And when i run it. It does not work. Thank you for any response.
I think you need to change this:
var NewPath = [new google.maps.LatLng(-27.46758, 153.027892)];
addNewPoint(NewPath);
to this:
var NewPath = new google.maps.LatLng(-27.46758, 153.027892);
addNewPoint(NewPath);
So you only pass through a LatLng point, rather than an array containing one. So it corresponds more closely to the example you gave,
path.push(event.latLng);