Polyline disappear on zoom out API Google Maps V3

Polyline disappear on zoom out API Google Maps V3 - javascript

According to an old topic this problem should be fixed in version 2 of the API
(https://code.google.com/p/gmaps-api-issues/issues/detail?id=15)
Testing in Chrome v. 35.0.1916.153 and IE9 the bug appeared, already in Firefox v. 31 is working perfectly.
Codes to show the problem:
http://jsfiddle.net/as0wv114/2/
// HTML
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
//CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
//JS
var map;
var latLngBounds;
var coordinate = [];
var flightPath = [];
window.onload = initialize();
function initialize() {
/* Create Map */
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
latLngBounds = new google.maps.LatLngBounds();
/* Create first polyline */
coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');
flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
flightPath[0] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Create second polyline */
coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');
coordinate[4] = new google.maps.LatLng('-25.2793374786', '-50.0998001099');
flightPlanCoordinates = [coordinate[3], coordinate[4]];
flightPath[1] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Set polylines in Map */
flightPath[0].setMap(map);
flightPath[1].setMap(map);
/* Center polilynes in Map */
$.each(coordinate, function(key, value){
latLngBounds.extend(value);
});
map.fitBounds(latLngBounds);
}
http://jsfiddle.net/as0wv114/3/
// HTML
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
//CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
//JS
var map;
var latLngBounds;
var coordinate = [];
var flightPath = [];
window.onload = initialize();
function initialize() {
/* Create Map */
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
center: new google.maps.LatLng(-24.1207046509, -52.7306060791)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
latLngBounds = new google.maps.LatLngBounds();
/* Create first polyline */
coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791');
coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825');
coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883');
flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]];
flightPath[0] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Create second polyline */
coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070');
coordinate[4] = new google.maps.LatLng('-25.2893374786', '-50.0998001099');
flightPlanCoordinates = [coordinate[3], coordinate[4]];
flightPath[1] = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 8
});
/* Set polylines in Map */
flightPath[0].setMap(map);
flightPath[1].setMap(map);
/* Center polilynes in Map */
$.each(coordinate, function(key, value){
latLngBounds.extend(value);
});
map.fitBounds(latLngBounds);
}
Since the code worked in Firefox v. 31, the problem would be in other browsers or is this a problem of the Google Maps API?
Sorry my english.

Related

polygon not being drawn on map from coordinates (from array)

I'm trying to figure out why the polygon is not being drawn on my google maps.
I closed it down to the array but can't see what I'm doing wrong to be honest.
I deleted the google API KEY from my code below to short it a bit.
Any tips/feedback?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
</body>
<script>
function initialize()
{
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//options for the polygon
var polyOptions = {
paths: path,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>

Translate your array of arrays into an array of LatLngLiteral objects (or LatLng objects).
var fixedPath = [];
for (var i=0; i<path.length; i++) {
fixedPath.push({lat:path[i][0],lng:path[i][1]});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
proof of concept fiddle
code snippet:
function initialize() {
//fill array with coordinates
var path = [
[51.14920179999362, 3.706512451171875],
[50.99042122689005, 3.475799560546875],
[50.93852713736125, 3.73809814453125],
[50.95929172950454, 4.003143310546875],
[51.108695514831865, 3.972930908203125]
];
//Options for the map
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(51.0108706, 3.7264613),
}
//generate map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var fixedPath = [];
for (var i = 0; i < path.length; i++) {
fixedPath.push({
lat: path[i][0],
lng: path[i][1]
});
}
//options for the polygon
var polyOptions = {
paths: fixedPath,
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: false, //editeren van de polygon
draggable: false //verplaatsen van de polygon
};
//create the polygon
var polygon = new google.maps.Polygon(polyOptions);
polygon.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
a margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps Circle

I am trying to load data from an API then display it using circles. I am able to create markers with the data points but not circles. I am following this example here from Google's documentation.
What I expect to happen is in the for loop, using center: new google.maps.LatLng(well.location.latitude, well.location.longitude) would suffice to create the center points. However, that doesn't seem to work. Everything else is the same as the example (will modify later).
I expected this to work because earlier in the example, I am able to use $.each to display markers using field.location.latitude, field.location.longitude which is essentially the same thing (or so I think).
Can I not make circles within the $.getJSON function like I can with markers? Is it happening "out of sync"? I'm still trying to learn how to process async events.
Fiddle here.
HTML:
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
CSS:
#map {
border: 1px solid black;
margin: 0 auto;
width: 500px;
height: 300px;
}
JavaScript
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
//console.log(markers);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
for (var i = 0; i < data.length; i++) {
//console.log(data[i].location.latitude + ", " + data[i].location.longitude);
};
$.each(data, function(i, field) {
addMarker(field.location.latitude, field.location.longitude);
});
for (var well in data) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude,
well.location.longitude),
radius: 100000
});
};
});
});

data is an array, either iterate through it, or use $.each (or .forEach).
for (var i=0; i < data.length; i++) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
radius: 10000
});
};
or (like you did with the markers):
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
code snippet:
var map;
var mapProp;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
});
});
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#map {
border: 1px solid black;
margin: 0 auto;
width: 99%;
height: 99%;
}
<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"></div>

Your code for the markers was correct, but there are some items of your data that do not have a location property, that's why your code is not fully working.
If you want to add Circles instead of markers, you can use your $.each loop and simply check the location block before adding a point.
Here is a working example: http://jsfiddle.net/xb7eh58p/ (sorry, didn't use yours because I had not seen your link)
In details, here is your code that I adjusted:
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
//for (var i = 0; i < data.length; i++) {
// console.log(data[i].location.latitude + ", " + data[i].location.longitude);
//};
$.each(data, function(i, field) {
if(field.location) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(field.location.latitude,
field.location.longitude),
radius: 100000
});
} else {
console.log("Missing location for this data item");
}
});
});
});
As you can see, you just need to ckeck if(field.location)

Google maps: polyline from array

I have an array, full of coordinates and entries. The thing is, I want to get a polyline which connects all the point coordinates in the array.
Placing markers and infowindows are fine but I can't get the polyline.
I need to go through the array by a loop because I want to use the same way for other coordinates again.
Here is the code:
var places = [
['New Delhi', 28.6139587,77.208684],
['Amritsar', 31.643628, 74.859624],
['Srinagar', 34.09, 74.79],
['Kargil', 34.55, 76.133333],
['Alchi', 34.2334, 77.1625],
['Leh', 34.145397, 77.567614]
];
for (c = 0; c < places.length; c++){
var coords = new google.maps.LatLng(places[c][1], places[c][2])
poly.push(coords);
}
console.log(poly);
var Itinerary = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: '#ffd500',
strokeOpacity: 1.0,
strokeWeight: 5
});
Itinerary.setMap(map);

You have a javascript error in your posted code: Uncaught ReferenceError: poly is not defined.
working fiddle
code snippet:
var geocoder;
var map;
var poly = []; // added this
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var places = [
['New Delhi', 28.6139587, 77.208684],
['Amritsar', 31.643628, 74.859624],
['Srinagar', 34.09, 74.79],
['Kargil', 34.55, 76.133333],
['Alchi', 34.2334, 77.1625],
['Leh', 34.145397, 77.567614]
];
var bounds = new google.maps.LatLngBounds();
for (c = 0; c < places.length; c++) {
var coords = new google.maps.LatLng(places[c][1], places[c][2])
poly.push(coords);
bounds.extend(coords);
}
console.log(poly);
var Itinerary = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: '#ffd500',
strokeOpacity: 1.0,
strokeWeight: 5
});
Itinerary.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

I am creating google polyline from an array and increment the array with a for loop, but the polyline is not drawn

This is an simple form of question for a bigger problem, I have narrowed down my problem to this piece of code I want some help.
I am trying to give the coordinate of the path i traveled to an array from a for loop, the array has the values but the polyline is not plotting.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates =[];
for (i=0;i<5;i++)
{
flightPlanCoordinates[i] = [new google.maps.LatLng(i,i)];
}
document.getElementById("demo").innerHTML = flightPlanCoordinates; /*this is just to check if array has values*/
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 6.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

There is a javascript error in the posted code:
Uncaught InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number
on this line:
flightPlanCoordinates[i] = [new google.maps.LatLng(i,i)];
That should be:
flightPlanCoordinates[i] = new google.maps.LatLng(i,i);
code snippet:
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [];
for (i = 0; i < 5; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(i, i);
}
document.getElementById("demo").innerHTML = flightPlanCoordinates; /*this is just to check if array has values*/
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 6.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="demo"></div>

Complex Polylines with arrow google map api v3

I wanted to create the arrow directed polyline using google map. I'm able to connect through line. But i wanted to draw line in arrow ended.
My code is
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 5
//center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.clearOverlays();
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
offset: '100%'
}],
strokeWeight: 3
};
lineCoordinates= new google.maps.Polyline(polyOptions);
lineCoordinates.setMap(map);
}
function placeMarker(mapLoc,address,infoDlgString){
map.setCenter(mapLoc);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: address,
position: mapLoc
});
var infowindow = new google.maps.InfoWindow({
content:infoDlgString
});
infowindow.open(map,marker);
}
function getAddressDetail(address2,infoDlgString){
geocoder.geocode( { 'address': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
map.setCenter(results2[0].geometry.location);
placeMarker(results2[0].geometry.location,address2,infoDlgString);
var path = lineCoordinates.getPath();
path.push(results2[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status2);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You haven't specified a path for your polyline to follow. So Google doesn't know what to plot. Once you add a path of multiple latlngs in your polyOptions variable, the line should appear with the correct arrow head end. This works for me:
<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(54.57723, -2.79748);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#FF0000',
strokeOpacity: 1.0
};
var polyline = new google.maps.Polyline({
path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
strokeColor: "#000000",
strokeOpacity: 0.5,
strokeWeight: 4,
map: map,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also note that there is no strokeColor or strokeOpacity properties in the IconSequence object. These are on the Symbol object instead.

Develop Reference

JavaScript is the programming language of the Web.

Polyline disappear on zoom out API Google Maps V3 - javascript

Related

polygon not being drawn on map from coordinates (from array)

Google Maps Circle

Google maps: polyline from array

I am creating google polyline from an array and increment the array with a for loop, but the polyline is not drawn

Complex Polylines with arrow google map api v3

Categories

Resources