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)
Related
I am working on interactive map, using google maps api. The map has a floating panel with two text fields in which I am writing GPS coordinates.
Then I have to make a marker and make a polygon from these markers. I can make a simple line from last marker to previous marker, but I do not kno, how to make the polygon.
Here is my code:
HTML
<div id="floating-panel">
<input id="lat" type="text" value="">
<input id="lng" type="text" value="">
<input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>
CSS
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
JS
var poly;
var map;
var myPolygon;
var path = [];
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(49.8037633, 15.4749126),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2
});
poly.setMap(map);
var lengthPolyg = path.length;
if(lengthPolyg > 2){
myPolygon = new google.maps.Polygon({
paths: path,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
}
myPolygon.setMap(map);
//console.log(triangleCoords);
document.getElementById('submit').addEventListener('click', function() {
addLatLng();
});
}
function addLatLng() {
var inputLat = document.getElementById('lat').value;
var inputLng = document.getElementById('lng').value;
path = poly.getPath();
var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));
path.push(curPosition);
var marker = new google.maps.Marker({
position: {lat: parseFloat(inputLat), lng: parseFloat(inputLng)},
//title: '#' + path.getLength(),
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2P1rNcUTs9V_tOGPG6aOP0Wp6Xn-P6kc&callback=initMap">
You are creating a Polyline, not a Polygon (you only create the Polygon in the initMap routine if the Polyline's path is greater than 2, which it never is at that point in your code). Move the creation of the Polygon into the addLatLng function:
function addLatLng() {
var inputLat = document.getElementById('lat').value;
var inputLng = document.getElementById('lng').value;
path = poly.getPath();
var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));
path.push(curPosition);
var lengthPolyg = path.length;
if (!myPolygon && lengthPolyg > 2) {
myPolygon = new google.maps.Polygon({
paths: path,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
myPolygon.setMap(map);
}
if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);
var marker = new google.maps.Marker({
position: {
lat: parseFloat(inputLat),
lng: parseFloat(inputLng)
},
map: map
});
}
proof of concept fiddle
code snippet:
var poly;
var map;
var myPolygon;
var path = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(49.8037633, 15.4749126),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
google.maps.event.addListener(map, 'click', function(evt) {
document.getElementById('lat').value = evt.latLng.lat();
document.getElementById('lng').value = evt.latLng.lng();
})
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2
});
document.getElementById('submit').addEventListener('click', function() {
addLatLng();
});
}
function addLatLng() {
var inputLat = document.getElementById('lat').value;
var inputLng = document.getElementById('lng').value;
console.log(inputLat + "," + inputLng);
path = poly.getPath();
var curPosition = new google.maps.LatLng(parseFloat(inputLat), parseFloat(inputLng));
path.push(curPosition);
var lengthPolyg = path.length;
console.log(lengthPolyg);
if (!myPolygon && lengthPolyg > 2) {
console.log("create myPolygon " + path.length);
myPolygon = new google.maps.Polygon({
paths: path,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
myPolygon.setMap(map);
}
if (!!myPolygon && myPolygon.setPath) myPolygon.setPath(path);
var marker = new google.maps.Marker({
position: {
lat: parseFloat(inputLat),
lng: parseFloat(inputLng)
},
map: map
});
}
#map {
height: 80%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="floating-panel">
<input id="lat" type="text" value="">
<input id="lng" type="text" value="">
<input id="submit" type="button" value="Vložit">
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
I have two sets of points coordinates that I need to connect on google map, like this, just much larger:
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
The first coordinate from "start" needs to be connected to the first coord from "end", and so on, until the end. Got that, but now I need to make "start" and "end" points more recognizable, put some kind of dots in a different color on them. What I have:
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();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
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);
Any kind of help is welcomed.
The simplest thing you can just create markers for start and end points. Like the following code
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);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
It will give you something like
Code snippet
var map;
function initMap() {
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();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
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);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
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>
I am trying to get a single circle for my google map, i am not using the multiple array as it is specified in the google map document because i just want one single point with the circle to be shown in the map.
I don't know where exactly am i making error, please will someone let me know where exactly am i making error.
this is my code
var loc = new google.maps.LatLng(25.800693, 55.976199);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: loc
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: loc
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(25.800693, 55.976199),
radius: 50
});
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in advance
Move the initialization of the circle inside the initialize function, so it is initialized after the map, not before.
var loc = new google.maps.LatLng(25.800693, 55.976199);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: loc
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: loc
});
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(25.800693, 55.976199),
radius: 50
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
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.