So I'm trying to apply styles according to contents of a string in a certain column, at the moment I'm just testing for one particular string.
function makeMap(lat, lng, zoom) {
myLatLng = new google.maps.LatLng(lat, lng)
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: myLatLng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col5",
from: "1Qrjmw1bt5n__AQhdCbiShbMCVS8FqySXx8Jie4A",
where: "month = 2013-05 || month = 2013-06"
},
styles: [
{ markerOptions: { iconName: 'small_yellow' }},
{
where: "'Last outcome category' = 'No further action at this time'",
markerOptions: { iconName: 'small_red' }
}
],
options: {
templateId: 2
}
});
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"You are here!"
});
}
What this seems to be doing at the moment is applying the last style to everything, so in this case everything is the red marker but if I switch it around everything will be the yellow marker.
The where clause in the FusionTableLayer query is invalid
where: "month = 2013-05 || month = 2013-06"
(There is no 'or' (||) operator in FusionTables) It seems to be causing the styles not to be processed correctly.
working example
Related
I am working on a simple map on a dashboard that registers click events and save the locations into a collection and also creates a marker on the location clicked. However, only the locations clicked get saved and the markers do not show up. Here is my code below
Template.osm.onRendered(function(){
var map = L.map('osm-container', {
center: [6.54, 3.33],
zoom: 13
});
var markers = {};
var id;
L.tileLayer('http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Imagery from MapBox — Map data © OpenStreetMap',
subdomains: 'abcd',
id: 'REMOVED',
accessToken: 'REMOVED'
}).addTo(map);
var coordinates = {};
map.on('click', function(event) {
var randm = Math.ceil(10000*Math.random());
var entry = Coordinates.insert({
lat: event.latlng.lat,
lng: event.latlng.lng,
seq: randm });
id = entry;
});
Coordinates.find().observe({
added: function (document) {
L.marker({ lat: Coordinates.find({_id:id},{lat:1, _id:0}),
lng: Coordinates.find({_id:id},{lng:1,_id:0}) },{
clickable : true,
draggable: true,
keyboard: true,
riseOnHover: true
}).addTo(map);
map.on('dragend', function(event) {
todo
});
// markers[id] = mark;
},
changed: function(newDocument, oldDocument) {
// todo;
},
removed: function (oldDocument) {
// todo
}
});
});
Please can anyone help
There seem to be multiple things wrong, but one thing for sure is that you are not actually setting the lat/lng for the markers (they are both "1" in your code). Also, you don't need to find there once more. The document is already given to you in whole, so you can just take the fields you need:
Coordinates.find().observe({
added: function (document) {
L.marker({ lat: document.lat,
lng: document.lng, }, {
...
This question already has answers here:
How to set zoom level in google map
(6 answers)
Closed 8 years ago.
I have tried everything but can't work out how to remove the fit to bounds part of this code and set a zoom level instead. The problem is this map is designed for multiple markers but I'm currently only using it with 1 and it zooms in too close.
var gmarkers = [];
var markers = [
[ '<div id="mapcontent">' +
'<a href ="#project0"><h4>43 Short Street</h4>' +
'</div>'
, -27.686478,153.131745]
];
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'all', stylers: [{saturation: -100},{brightness: 5} ]} ],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
icon: './img/mapmarker.png',
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps()
function myClick(id){
google.maps.event.trigger(gmarkers[id], 'click');
}
Thanks for your help!
Change
map.fitBounds(bounds);
to (or remove it)
// map.fitBounds(bounds);
Add your desired zoom and center when you initialize the map:
var myOptions = {
// change these per your desired center and zoom.
zoom: 4,
center: new google.maps.LatLng(desiredLat, desiredLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
featureType: 'all',
stylers: [{
saturation: -100
},
{
brightness: 5
}]
}],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
But if you only have one marker, you should also remove the loop.
I'm having a problem setting a variable in ST_DISTANCE to a variable instead of a number. My goal is to sort fusion table entries by distance to the client and only display the closest 3.
(Also, I would like the window to zoom out and encompass those points as well as point to where the client is. Any hints or links to some recourses would be appreciated).
Here is the Google Maps, Fusion Tables, and Geolocation code:
<script type="text/javascript">
(function() {
if(!!navigator.geolocation) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
navigator.geolocation.getCurrentPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(geolocate);
});
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col1",
from: "1JaRXQJ_YJch5Ua6cfZCBpaUEKRnd2jIcHVmcODY",
orderBy: 'ST_DISTANCE(col1, LATLNG("geolocate"))',
limit: 3,
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
} else {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39.918487877955485, -98.30599773437501),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col1",
from: "1JaRXQJ_YJch5Ua6cfZCBpaUEKRnd2jIcHVmcODY",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
}
})();
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I know this is messy. I don't know javascript.
I would like to know how to put the variable "geolocate" created by:
navigator.geolocation.getCurrentPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(geolocate);
});
Into the LATLNG place in:
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw',
orderBy: 'ST_DISTANCE(Address, LATLNG(37.4,-122.1))',
limit: 3
}
Any help is greatly appreciated.
This is just a basic javascript question ...
Make geolocate global, like var map;
var map;
var geolocate;
Remove var in front of your existing geolocate.
Then remove quotes around your usage of geolocate.
orderBy: 'ST_DISTANCE(col1, LATLNG(' + geolocate + ') )',
I would like to know how to use itemtap to iterate through a list. I have a list right now which shows multiple items and when the user clicks on each, a map will appear showing the marker of the item. However, every item on the list seems to be showing the same thing. It is just showing the latest item on the list (first at the top). I would like to know what I'm doing wrong with the itemtap function. Thank You!!
Heres my controller where the itemtap function is:
Ext.define('demo.controller.News',{
extend:'Ext.app.Controller',
config:{
refs:{
NewsContainer:'newscontainer'
},
control:{
'newscontainer new list':{
itemtap:function(list, index, target, record){
var detailsView = Ext.create('demo.view.Mapo');
detailsView.setData(record.data);
this.getNewsContainer().push(detailsView);
}
}
}
}
});
And here is my map:
Ext.define('demo.view.Mapo', {
extend: 'Ext.Map',
xtype:'mapo',
config: {
title:'Incident Location',
iconCls:'maps',
layout:'fit',
draggable: true,
useCurrentLocation: true,
mapOptions: {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
},
initialize: function(){
var me = this;
me.on('maprender', function(comp, map){
var image = 'resources/images/current.png';
new google.maps.Marker({
position: new google.maps.LatLng(
this._geo.getLatitude(),
this._geo.getLongitude()
),
icon: image,
map: map,
title: "Current Location",
animation: google.maps.Animation.DROP
});
//Circle Radius
// var populationOptions = {
// strokeColor: "#FF0000",
// strokeOpacity: 0.8,
// strokeWeight: 1,
// fillColor: "#FF0000",
// fillOpacity: 0.35,
// map: map,
// center: new google.maps.LatLng(this._geo.getLatitude(),
// this._geo.getLongitude()),
// radius: 2000
// };
// var t = new google.maps.Circle(populationOptions);
for (i=0; i<Ext.getStore('news').getData().length; i++){
var data = Ext.getStore('news').getData().items[i].data
};
new google.maps.Marker({
position: new google.maps.LatLng(
data.Latitude,
data.Longitude
),
// icon: image,
map: map,
title: "Incident Location",
animation: google.maps.Animation.BOUNCE
});
});
me.callParent(arguments);
}
});
How can I add label to my marker if my markers are populated on ajax success each result.
map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });
I tried like this, but with no success:
map.gmap('addMarker', {
'position': new google.maps.LatLng(result.latitude, result.longitude),
'bounds': true,
'icon': markerIcon,
'labelContent': 'A',
'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
'labelClass': 'labels', // the CSS class for the label
'labelInBackground': false
});
If you just want to show label below the marker, then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this..
<script type="text/javascript">
var point = { lat: 22.5667, lng: 88.3667 };
var markerSize = { x: 22, y: 40 };
google.maps.Marker.prototype.setLabel = function(label){
this.label = new MarkerLabel({
map: this.map,
marker: this,
text: label
});
this.label.bindTo('position', this, 'position');
};
var MarkerLabel = function(options) {
this.setValues(options);
this.span = document.createElement('span');
this.span.className = 'map-marker-label';
};
MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
onAdd: function() {
this.getPanes().overlayImage.appendChild(this.span);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })];
},
draw: function() {
var text = String(this.get('text'));
var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.span.innerHTML = text;
this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
this.span.style.top = (position.y - markerSize.y + 40) + 'px';
}
});
function initialize(){
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
map: gmap,
position: myLatLng,
label: 'Hello World!',
draggable: true
});
}
</script>
<style>
.map-marker-label{
position: absolute;
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
This will work.
I doubt the standard library supports this.
But you can use the google maps utility library:
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers
Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API.
You can now create your label marker like this:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(result.latitude, result.longitude),
icon: markerIcon,
label: {
text: 'A'
}
});
If you would like to see the 1 character restriction removed, please vote for this issue.
Update October 2016:
This issue was fixed and as of version 3.26.10, Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels.
The way to do this without use of plugins is to make a subclass of google's OverlayView() method.
https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView
You make a custom function and apply it to the map.
function Label() {
this.setMap(g.map);
};
Now you prototype your subclass and add HTML nodes:
Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
this.MySpecialDiv = document.createElement('div');
this.MySpecialDiv.className = 'MyLabel';
this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers
}
you also have to implement remove and draw functions as stated in the API docs, or this won't work.
Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
$('.myLabel')
.css({
'top' : position.y + 'px',
'left' : position.x + 'px'
})
;
}
That's the gist of it, you'll have to do some more work in your specific implementation.
You can now add a class name to the marker label via google.maps.MarkerLabel interface.
For example:
const marker = new google.maps.Marker({
position: position_var,
map,
label: {
text: 'label text',
className: "my-label-class",
},
title: "Marker Title",
});
For a full list of options see the google map reference doc:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel