I have created a webpage which uses Google Map API.
JSfiddle
function initMap() {
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 19.0760, lng: 72.8777},
zoom: 5,
styles: [
{
featureType: 'all',
stylers: [
{ saturation: -80 }
]
},{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{ hue: '#00ffee' },
{ saturation: 50 }
]
},{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolShape,
offset: '0%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line,count));
count = (count+0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function(){
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line,count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
//n++;
//};
}
}
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 19.0760, lng: 72.8777},
zoom: 5,
styles: [
{
featureType: 'all',
stylers: [
{ saturation: -80 }
]
},{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{ hue: '#00ffee' },
{ saturation: 50 }
]
},{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolShape,
offset: '0%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [
{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}
],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line,count));
count = (count+0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function(){
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line,count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
if (count >= 199){
clearInterval(intervalForAnimation);
line1.setMap(null);
};
}
}
The Webpage SS
I want to implement a slider which has the limits of the date given by user to it. And the slider should be interactive ie the user can jump forward or backward just by clicking on the slider line eg the slider used in YouTube.
Note:Implementation of slider and controlling the animation of the symbol with the slider line is primary objective. Setting the limits is secondary objective.
I tried implementing it,but wasn't able to get success.
One option would be to use the jquery-ui slider (from this question: control the animation of the symbol via a slider (in google maps)):
$(function() {
$("#slider").slider({
max: 200,
min: 0,
change: function(event, ui) {
console.log("ui.value=" + ui.value);
var icons = line.get('icons');
icons[0].offset = (ui.value / 2) + '%';
line.set('icons', icons);
}
});
});
proof of concept fiddle
code snippet:
var line;
var line1;
function initMap() {
var intervalForAnimation;
var count = 0;
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 19.0760,
lng: 72.8777
},
zoom: 5,
styles: [{
featureType: 'all',
stylers: [{
saturation: -80
}]
}, {
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{
hue: '#00ffee'
}, {
saturation: 50
}]
}, {
featureType: 'poi.business',
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var symbolSource = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#FF0000',
strokeWeight: 4
};
var symbolShape = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#0000FF',
strokeOpacity: 1.0
};
var symbolDestination = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
line = new google.maps.Polyline({
path: [{
lat: -33.918861,
lng: 18.423300
}, {
lat: -35.842160,
lng: 18.863525
}, {
lat: -39.170387,
lng: 35.189209
}, {
lat: -26.331494,
lng: 54.228516
}, {
lat: 0.462885,
lng: 61.083984
}, {
lat: 19.075984,
lng: 72.877656
}],
icons: [{
icon: symbolShape,
offset: '0%'
}],
strokeColor: '#0000FF ',
strokeOpacity: 0,
map: map
});
//Our Secondary polyline for reseting purpose
var line1 = new google.maps.Polyline({
path: [{
lat: -33.918861,
lng: 18.423300
}, {
lat: -35.842160,
lng: 18.863525
}, {
lat: -39.170387,
lng: 35.189209
}, {
lat: -26.331494,
lng: 54.228516
}, {
lat: 0.462885,
lng: 61.083984
}, {
lat: 19.075984,
lng: 72.877656
}],
icons: [{
icon: symbolSource,
offset: '0%'
}, {
icon: symbolDestination,
offset: '100%'
}],
strokeColor: '#0000FF ',
strokeOpacity: 0.8,
map: map
});
//Map boundaries
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < line.getPath().getLength(); i++) {
bounds.extend(line.getPath().getAt(i));
}
map.fitBounds(bounds);
function playing() {
intervalForAnimation = window.setInterval(function() {
$("#map").after(animateCircle(line, count));
count = (count + 0.2) % 200;
}, 20);
}
$(".play").click(function() {
playing();
pb = new progressBar();
map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
});
$(".pause").click(function() {
clearInterval(intervalForAnimation);
});
$(".reset").click(function() {
count = 0;
line1.setMap(map);
});
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line, count) {
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
$("#slider").slider("value", count);
if (count >= 199) {
clearInterval(intervalForAnimation);
// line1.setMap(null);
};
//n++;
//};
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script>
$(function() {
$("#slider").slider({
max: 200,
min: 0,
change: function(event, ui) {
console.log("ui.value=" + ui.value);
var icons = line.get('icons');
//if ((icons[0].offset <= 100 + '%')) {
icons[0].offset = (ui.value / 2) + '%';
line.set('icons', icons);
}
});
});
</script>
<script>
$(document).ready(function() {
$("#datepickerFrom").datepicker();
});
</script>
<div style="border: 1px solid black; background-color: green; padding: 5px;">
slider
<div id="slider"></div>
</div>
<div>
<!--Play button-->
<button type="button" class="play">Play</button>
<!--Pause button-->
<button type="button" class="pause">Pause</button>
<!--Reset and Stop button-->
<button type="button" class="reset">Reset</button>
</div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
Related
I want to loop through an array of coordinates that I want to use for markers and drawing a line in google maps.
Is there a solution to create the path property with a loop of const locations?
Please check my example below:
const lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "red",
scale: 4
};
const locations = [
["Tampere", 61.50741562413278, 23.75886761967578, 1, "Termin: xx.xx"],
["Helsinki", 60.219957, 25.196776, 2, "test2"],
["Travemünde", 55.778989, 18.271974, 2, "test3"],
["Stuttgart", 48.7733567672875, 9.174572759931003, 3, "test4"],
["Ludwigsburg", 48.8893286910321, 9.197454231637288, 4, "test5"],
]
const line = new google.maps.Polyline({
path: [
{ lat: locations[0][1], lng: locations[0][2] },
{ lat: 60.219957, lng: 25.196776 },
{ lat: locations[2][1], lng: locations[2][2] },
{ lat: 53.941362, lng: 10.860464 },
{ lat: 48.7733567672875, lng: 9.174572759931003 },
],
strokeColor: "red",
scale: 7,
icons: [
{
icon: lineSymbol,
offset: "100%",
},
],
map: map,
});
By using above code it creates in Google Maps this:
The result
To process your input array and create a polyline in a loop:
var path = [];
for (var i=0; i<locations.length; i++) {
// add to polyline
path.push({lat: locations[i][2], lng: locations[i][1]});
// create marker
new google.maps.Marker({
position: path[path.length-1],
map: map
})
}
const line = new google.maps.Polyline({
path: path,
strokeColor: "red",
scale: 7,
icons: [
{
icon: lineSymbol,
offset: "100%",
},
],
map: map,
});
proof of concept fiddle
(note that the data in your question doesn't match your picture)
code snippet:
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: "terrain",
});
const lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "red",
scale: 4
};
const locations = [
["Tampere", 61.50741562413278, 23.75886761967578, 1, "Termin: xx.xx"],
["Helsinki", 60.219957, 25.196776, 2, "test2"],
["Travemünde", 55.778989, 18.271974, 2, "test3"],
["Stuttgart", 48.7733567672875, 9.174572759931003, 3, "test4"],
["Ludwigsburg", 48.8893286910321, 9.197454231637288, 4, "test5"],
]
var path = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
path.push({
lat: locations[i][2],
lng: locations[i][1]
});
bounds.extend(path[path.length - 1]);
new google.maps.Marker({
position: path[path.length - 1],
map: map
})
}
const line = new google.maps.Polyline({
path: path,
strokeColor: "red",
scale: 7,
icons: [{
icon: lineSymbol,
offset: "100%",
}, ],
map: map,
});
map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
</body>
</html>
I am trying to remove all the 4 circle from google map with a click of a button, but currently I can only remove one circle. Could anyone let me know how I can remove the multiple circle at once with a click of a button. Sorry I am new to this. Thanks in advance.
My code:
<input onclick="removecircle();" type=button value="Remove line">
<input onclick="addcircle();" type=button value="Restore line">
<div id="map"></div>
<script>
var cityCircle;
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
function addcircle(){
cityCircle.setMap(map);
}
function removecircle(){
cityCircle.setMap(null);
}
Image 1
Image 2
You need to keep references to the circles (and the map) in the global scope (where they will be accessible from HTML click listener functions). Then process through all the circles to either add or remove them from the map.
var circles = [];
var map;
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
// keep reference to the circle
circles.push(cityCircle);
}
}
function addcircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(map);
}
}
function removecircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
}
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
<input onclick="removecircle();" type=button value="Remove circles">
<input onclick="addcircle();" type=button value="Restore circles">
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map"></div>
<script>
var circles = [];
var map;
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
circles.push(cityCircle);
}
}
function addcircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(map);
}
}
function removecircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
var cityCircle;
var citymap = {
chicago: {
center: {
lat: 41.878,
lng: -87.629
},
population: 2714856
},
newyork: {
center: {
lat: 40.714,
lng: -74.005
},
population: 8405837
},
losangeles: {
center: {
lat: 34.052,
lng: -118.243
},
population: 3857799
},
vancouver: {
center: {
lat: 49.25,
lng: -123.1
},
population: 603502
}
};
</script>
I am using the google maps api and using grid clustering for the markers. I wanted to know if there is a way to exclude a single marker from clustering. I want a "You are here" marker that is always visible. I tried using a different array for just that marker and not including it the cluster function but that didn't work.
Does anyone have a solution for this?
Here is how i am doing the clustering
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;
you_are_here.push({
lat : Geo.lat,
lng : Geo .lng,
animation: google.maps.Animation.DROP,
title : 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
}
});
function loadResults (data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++)
{
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined)
{
markers_data.push({
lat : item.Lat,
lng : item.Lng,
title : item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map.addMarkers(markers_data);
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 10,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50
}
clust1 = new MarkerClusterer(map,[], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(you_are_here);
The GMaps clusters all the markers you add to it with the addMarker method (if you provide a MarkerClusterer).
One option: add your "special" marker (the one that you don't want clustered) to the map manually, so it isn't added to the MarkerClusterer:
The GMaps.map property is a reference to the Google Maps Javascript API v3 map object. So this will add a marker to the map without letting the GMaps library know about it:
you_are_here = new google.maps.Marker({
position: {lat: Geo.lat,lng: Geo.lng},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
map: map.map
});
proof of concept fiddle
code snippet:
var Geo = {
lat: 40.7281575,
lng: -74.07764
};
$(document).on('click', '#mapbut', function() {
var items, distances, you_are_here = [],
markers_data = [],
markers_data2 = [],
fred, clust1, markss;
function loadResults(data) {
if (data.map.length > 0) {
items = data.map;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var distances = [];
var dist2;
if (item.Lat != undefined && item.Lng != undefined) {
markers_data.push({
lat: item.Lat,
lng: item.Lng,
title: item.Site,
infoWindow: {
content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
}
});
}
}
}
map = new GMaps({
el: '#map',
lat: Geo.lat,
lng: Geo.lng,
zoom: 8,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
markerClusterer: function(map) {
options = {
gridSize: 50,
imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
}
clust1 = new MarkerClusterer(map, [], options);
return clust1;
},
scaleControl: true,
streetViewControl: false
});
map.addMarkers(markers_data);
you_are_here = new google.maps.Marker({
position: {
lat: Geo.lat,
lng: Geo.lng
},
animation: google.maps.Animation.DROP,
title: 'Your are here',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
infoWindow: {
content: '<p>You are Here</p>'
},
map: map.map
});
// map.addMarkers(you_are_here);
}
loadResults(data);
});
var data = {
map: [{
Lat: 40.7127837,
Lng: -74.005941,
Site: "New York, NY",
distance: 1
}, {
Site: "Newark, NJ",
Lat: 40.735657,
Lng: -74.1723667,
distance: 2
}]
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<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>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>
To get around this is relatively simple, just after I send the markers array to MarkerClusterer I then add my location.
// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )
// add my location
gmap.addMarker({
lat: data.latitude,
lng: data.longitude
...
})
Thanks
i just want to show a track on my map i tried as follow but the problem is i don't want to load track point in layer from GPX File (because i don't want to generate file from coordinates witch i get from GPSdevice programmatically)
is there any way to add a track layer from long and lat
// Add the Layer with the GPX Track
var lgpx = new OpenLayers.Layer.Vector("Car track", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "testTrack.GPX",
format: new OpenLayers.Format.GPX()
}),
style: { strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5 },
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
Here is the lat and long in GPX file(xml format)
<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.0">
<name>Example gpx</name>
<trk><name>Example gpx</name><number>1</number>
<trkseg>
<trkpt lat="35.737097" lon="51.314965"></trkpt>
<trkpt lat="35.736953" lon="51.317454"></trkpt>
<trkpt lat="35.737572" lon="51.317551"></trkpt>
<trkpt lat="35.737755" lon="51.315716"></trkpt>
<trkpt lat="35.739588" lon="51.316070"></trkpt>
</trkseg>
</trk>
</gpx>
i've found the solution ,here it is
lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var coordinates = [
{ lat: "35.737097", lon: "51.314965" },
{ lat: "35.736953", lon: "51.317454" },
{ lat: "35.737572", lon: "51.317551" },
{ lat: "35.737755", lon: "51.315716" },
{ lat: "35.739588", lon: "51.316070" }
];
function DrawTrack(){
var points = coordinates.map(function (cor) {
return new OpenLayers.Geometry.Point(cor.lon, cor.lat)
.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
});
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
for (var i = 0; i < points.length - 1; i++) {
(function (i) {
window.setTimeout(function () {
var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]);
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
map.setCenter(points[i].lon, points[i].lat);
}, i * 1000);
}(i));
}
}
Example of loading GPX data in OpenLayers 3.
var lgpx = new ol.layer.Vector({
title: 'Car track',
source: new ol.source.Vector({
url: 'testTrack.gpx',
format: new ol.format.GPX()
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 5,
opacity: 0.5
})
})
});
map.addLayer(lgpx);
List of available formats.
Your answer was closed to be perfect.
You must parse the string number to float.
lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path));
var coordinates = [
{ lat: "35.737097", lon: "51.314965" },
{ lat: "35.736953", lon: "51.317454" },
{ lat: "35.737572", lon: "51.317551" },
{ lat: "35.737755", lon: "51.315716" },
{ lat: "35.739588", lon: "51.316070" }
];
function DrawTrack(){
var points = coordinates.map(function (cor) {
return new OpenLayers.Geometry.Point(parseFloat(cor.lon),parseFloat(cor.lat))
.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
});
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
for (var i = 0; i < points.length - 1; i++) {
(function (i) {
window.setTimeout(function () {
var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]);
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
map.setCenter(points[i].lon, points[i].lat);
}, i * 1000);
}(i));
}
}
I have the following code setup to apply a map for a variety of areas
var locations = [
['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
['Lond office - London Office', 51.515026, -0.086811, 2],
];
function plotMap(loc) {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
stylers: [
{ saturation: -100 } // <-- THIS
]
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
},
icon: 'marketICO.png',
title: (locations[loc][0])
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent(locations[loc][0]);
infowindow.open(map, marker);
}
})(marker, loc));
}
$('.livLink').click(function(){
plotMap(0);
});
$('.lonLink').click(function(){
plotMap(1);
});
plotMap(0);
Has anyone managed to get their map greyscale - i've had a few attempts - including above - but no luck so far..
You are not applying the styles correctly.
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var mapOptions = {
zoom: 17,
styles: styles,
// your other options here
};
Or directly in the map options:
var mapOptions = {
zoom: 17,
styles: [{
"stylers": [{
"saturation": -100
}]
}],
// your other options here
};
Check this nice tool: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html