How to iterate a list with itemtap (sencha touch 2) - dictionary

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);
}
});

Related

How do I redraw a google maps marker on click?

I have a google map with a set of map markers. I chose to draw the map markers with a function called pinSymbol() - instead of using the default image.
I want to change the color of the pin when it is clicked, but I can't get it to update. With the current code I can change the property of the icon, I can see this with console.log(marker), however it won't update the color on the map.
Question: How do I redraw the icon on click?
This is my code.
// Go through all restaurants and get facebook info,
// then create a marker for each one.
restaurants.forEach(function(restaurant){
getFacebookInfo(restaurant);
}); // end forEach loop
// Get data from Facebook Graph API and create a marker
function getFacebookInfo(restaurant){
$.ajax({
url : '/restaurants/' + restaurant.id,
type : 'GET',
dataType:'json',
success : function(data) {
restaurant.about = data.about;
createMarker(restaurant);
},
error : function(request, error) {
console.log(error);
alert("We're having some trouble getting a restaurant's info from Facebook. " +
"Please check your internet connection and try refreshing the page.")
}
});
}
// Create a marker on the map for a location
function createMarker(restaurant){
var position = restaurant.location;
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
restaurant.marker = new google.maps.Marker({
position: position,
map: map,
icon: pinSymbol('#CD212A', '#CD212A'),
name: restaurant.name,
id: restaurant.id,
about: restaurant.about,
animation: google.maps.Animation.DROP
});
// Push the marker to array of markers
markers.push(restaurant.marker);
// Call populateInfoWindow function
populateInfoWindow(restaurant.marker, infowindow);
// Add infowindow as a property to restaurant
// this makes it available for use outside this function.
restaurant.infowindow = infowindow;
This is where I'm stuck:
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function(){
this.icon = pinSymbol('#EED4D9', '#EED4D9');
console.log(restaurant.marker);
infowindow.open(map, this);
});
}
pinSymbol Function
// Create pin for google map marker
function pinSymbol(color, strokeColor) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: strokeColor,
strokeWeight: 1,
scale: 1,
labelOrigin: new google.maps.Point(0,-29)
};
}
There is no (documented) .icon property of a marker. Don't use it. Use the documented .setIcon method:
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function() {
this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
console.log(restaurant.marker);
infowindow.open(map, this);
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [];
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
});
createMarker({
name: "center",
id: 2,
about: "",
location: {
lat: 37.4419,
lng: -122.1419
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
// Create a marker on the map for a location
function createMarker(restaurant) {
var position = restaurant.location;
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
restaurant.marker = new google.maps.Marker({
position: position,
map: map,
icon: pinSymbol('#CD212A', '#CD212A'),
name: restaurant.name,
id: restaurant.id,
about: restaurant.about,
animation: google.maps.Animation.DROP
});
// Push the marker to array of markers
markers.push(restaurant.marker);
// Call populateInfoWindow function
populateInfoWindow(restaurant.marker, infowindow);
// Add infowindow as a property to restaurant
// this makes it available for use outside this function.
restaurant.infowindow = infowindow;
// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function() {
if (this.getIcon().fillColor != "#EED4D9") {
this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
} else {
this.setIcon(pinSymbol('#CD212A', '#CD212A'));
}
console.log(restaurant.marker);
infowindow.open(map, this);
});
}
// Create pin for google map marker
function pinSymbol(color, strokeColor) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: strokeColor,
strokeWeight: 1,
scale: 1,
labelOrigin: new google.maps.Point(0, -29)
};
}
function populateInfoWindow(marker, infowindow) {
infowindow.setContent("content");
};
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"></div>

Is it possible to have the editable attribute turned off in a polyline but still display the vertices as clickable circles?

I would like to display a polyline so that the vertices can not be moved, deleted or added, ie exactly like when the editable attribute is set to false, but the circles which are present when the editable attribute is set to true are still visible so that they can be clicked and a vertex number obtained.
So the polyline code could be:
newPoly = new google.maps.Polyline({
strokeColor: '#08088a',
strokeWeight: 2,
editable: false
});
Is this possible?
One option: process through the polyline, add circular markers to each vertex in the line with the vertex number in the marker's infowindow.
Related question: Google Maps V3 Polyline : make it editable without center point(s)
proof of concept fiddle
code snippet:
function initialize() {
var infowindow = new google.maps.InfoWindow();
var 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 polyCoord = [
new google.maps.LatLng(41.86, 8.73),
new google.maps.LatLng(41.88, 8.75),
new google.maps.LatLng(42, 8),
new google.maps.LatLng(43.5, 9)
];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polyCoord.length; i++) {
bounds.extend(polyCoord[i]);
var marker = new google.maps.Marker({
position: polyCoord[i],
title: '#0',
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'white',
fillOpacity: 1,
scale: 3,
strokeColor: 'black',
strokeWeight: 1,
strokeOpacity: 1,
// anchor: new google.maps.Point(200, 200)
}
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("vertex #" + i + "<br>coord: (" + this.getPosition().toUrlValue(6) + ")");
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
// Polyline
var newPoly = new google.maps.Polyline({
strokeColor: '#08088a',
strokeWeight: 2,
editable: false,
path: polyCoord,
map: map
});
}
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>

About marker Google API v3?

My idea is using handling click event for map to create markers. Then handling click event for marker to show lat() of this marker. But, it always show lat() of final marker in Array. I can't solved this error. Please help me this problem. Thank all
function addMarker(location){
var goldStar = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
makerArray.push(mar);
//console.log(makerArray.length);
//click_Marker(mar);
google.maps.event.addListener(mar, 'click', function(){
alert(mar.getPosition().lat());
});}
function initialize(){
var mapOptions = {
zoom: 12,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);;
GetCurrentLocation(map);
//Hướng dẫn đi
directionDisplay.setMap(map);
directionDisplay.setPanel(document.getElementById("direction"));
getData();
showListRestaurant();
//Thêm địa điểm vào bản đồ
google.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng);
});
}
If that is your complete code then you are missing the var declartion on your mar variable.
mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
Should instead have a var at the beginning
var mar = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: goldStar, //or use image
title: "Hello",
map: map
});
This would explain your problem because each marker you are adding is a reference to the same object, therefore every time you add a new click event to mar, you are in fact updating the click event of the same object. The result being that all the click events have the same value.
Here's a working jsfiddle:
http://jsfiddle.net/NGja4/50/

Google Maps V3 marker with label

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

Show just first and last marker on path

For generate markers on google maps I call the function displayLocation with the next code:
for (var i=0; i<data.length; i++) {
displayLocation(data[i]);
}
On displayLocation I create an array with all the positions for the path I want to create and the markers, I just wanna show the first and the last marker on the path.
My displayLocation function looks like:
function displayLocation(location){
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
if(location.nombreequipo=="AST1"){
var path = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
rutaAST1.push(path);
}
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: imagen,
draggable: false,
visible: true,
title: location.nombreequipo
});
arrayMarcadores.push(marker);
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
In this part of the code I set the path, I call:
varBool = true;
dibujaRutaAST1(map, rutaAST1, varBool);
And the function is:
var ruta = null;
function dibujaRutaAST1(mapa, rutaVar, varBool){
if(!ruta){
var coordRuta = rutaVar;
console.log("En función dibujo de rutas AST1: "+rutaVar);
ruta= new google.maps.Polyline({
map: mapa,
path: coordRuta,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
console.log(ruta);
}if(varBool){
ruta.setMap(mapa);
}else{
ruta.setMap(null);
}
}
Iteration on markers array:
function mostrarMarcas(nombreEquipo){
for(var i=0;i<arrayMarcadores.length;i++){
if(arrayMarcadores[i].title==nombreEquipo){
arrayMarcadores[i].setVisible(true);
}
}
}
Any suggestion?
Thanks.
Finally I just create the first and the last marker from my array with all the points:
if(rutaAST1.length!=0){
dibujaRutaAST1(map, rutaAST1, varBool);
var imagen ='img/markers/blue_MarkerA.png';
var markerIniAST1 = new google.maps.Marker({
position: rutaAST1[0],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerIniAST1, 'click', function(){
infowindow.setContent(contentAST1[0]);
infowindow.open(map, markerIniAST1);
});
var markerFinAST1 = new google.maps.Marker({
position: rutaAST1[rutaAST1.length-1],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerFinAST1, 'click', function(){
infowindow.setContent(contentAST1[contentAST1.length-1]);
infowindow.open(map, markerFinAST1);
});
}
Thank you so much for helping me to clear my mind with this part of my code :)

Resources