I want to add a marker to a Google map. The problem is that my site is a 'Ext.Container' and not 'Ext.map', because I need a titlebar. This is why getMap() is not working for me. Any chance to get this running?
This is the function that draws the map:
showMapCommand: function() {
var record = this.getRecord();
var map = new Ext.Map({
title: 'Map',
useCurrentLocation: false,
mapOptions: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(record.data.latitude, record.data.longitude),
mapTypeControl: false,
zoomControl: true,
overviewMapControl: false,
panControl: false,
rotateControl: false,
scaleControl: false,
controlPosition: false,
navigationControl: false,
streetViewControl: false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 15,
keyboardShortcuts: false,
scrollwheel: false
}
});
var marker = new google.maps.Marker ({
map: map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(record.data.latitude, record.data.longitude),
icon: 'resources/images/marker.png'
});
this.add([
map
]);
},
The error message of the console:
Uncaught Error: Invalid value for property <map>: [object Object]
Try this:
var marker = new google.maps.Marker ({
map: map.map,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(record.data.latitude, record.data.longitude),
icon: 'resources/images/marker.png'
});
hope it helps-
Edit:
Why dont you create a separate file with Ext.defining your map, and you just add it as an item of your container. That way you could this.getMap()
Related
I have created a bar chart with rangeslider using react-plotly.js. I want to enable drag and zoom feature on chart area as provided by the library. But that feature is not working for me. The fixedRange attribute of layout is not true. The cursor changes to the double arrow cursor but when I perform drag action, nothing happens. The area selected is not highlighted and not even zoomed in. But when I double click, the area get zoomed out.
My layout settings looks like:
const layout = {
title: this.state.chartTitle,
autosize: true,
dragmode: false,
// showlegend: true,
margin: {
r: 0,
t: 50,
b: 100,
pad: 0,
autoexpand: true
},
scrollZoom: true,
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
width: this.state.layoutWidth,
height: '750',
yaxis: {
title: this.state.yaxisTitle,
type: 'linear',
showgrid: true
},
xaxis: {
title: this.props.intl.formatMessage(messages.xAxisTitle),
type: this.state.xaxisType,
autorange: false,
showgrid: false,
range: this.state.axisRange,
rangeslider: {
visible: true,
range: this.state.sliderRange
}
}
I even tried scrollZoom attribute but that doesn't work either. The version of plotly.js and react-plotly.js that I am using is :
"plotly.js": "^1.41.3",
"react-plotly.js": "^2.2.0",
"react-plotlyjs": "^0.4.4",
Am I suppose to also add some css settings to it ? Please help.
Instead of putting
scrollZoom: true to layout, please try to put it into the config tree, like:
const Plot = createPlotlyComponent(Plotly);
ReactDOM.render(
React.createElement(Plot, {
data: [...],
layout: {...},
config: {
scrollZoom: true,
}
}),
document.getElementById('root')
);
i'm tring to reproduce the example show in:
https://developers.google.com/maps/documentation/javascript/examples/maptype-image
with react-google-maps.
it doesn't seem to have the same class google.maps.ImageMapType.
Did u know if there's a class that can help me or if someone already did this, link me the example?
<GoogleMap
className="maps"
defaultZoom={17}
defaultCenter={{ lat: 46.215951, lng: 12.306994 }}
defaultMapTypeId="moon"
defaultExtraMapTypes={[{id:"moon", mapType:{
getTileUrl: function(coord, zoom) {
return "mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/1/1/0.jpg";
},
maxZoom: 9,
minZoom: 0,
radius: 1738000,
name: 'Moon'
}}]}
defaultOptions={{
// these following 7 options turn certain controls off see link below
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
panControl: false,
zoomControl: false,
rotateControl: false,
fullscreenControl: false
}}
disableDefaultUI>
i try to do something like that
I find the trick.
I create the const ImageMapType like the example show and exported it.
in my map component i use these properties:
defaultOptions={{
maxZoom: 18,
mapTypeControlOptions: {
mapTypeIds: ['moon','satellite']
}
}}
mapTypeId={google ? 'moon' : 'satellite'}
defaultExtraMapTypes={[
['moon', mapStyles ]
]}
to link it the map.
defaultExtraMapTypes replace the map.set in the google api.
in HTML my map is defnied as this
<leaflet bounds="map.spatial_bounds_card" layers="map.layers_card" height="200px" ></leaflet>
in the controller, I expand the angular scope, to define bounds and layers. I dont know how to access the leaflet map, in order to add OverlayItems to it. Currently I have created a rectangle, but its not shown on the map.
function Ctrl($scope, leafletBoundsHelpers, leafletDrawEvents) {
var drawnItems2 = new L.FeatureGroup();
angular.extend($scope, {
map: {
spatial_bounds_card: {},
layers_card: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
}
},
drawOptions: {
position: "bottomright",
draw: {
polyline: false,
polygon: false,
circle: false,
rectangle: {
metric: false,
showArea: true,
shapeOptions: {
color: 'blue'
}
},
marker: false
},
edit: {
featureGroup: drawnItems2,
remove: false
}
},
defaults: {
scrollWheelZoom: false
}
}
});
var bb = L.latLngBounds($scope.filters.spatial.params.southwest, $scope.filters.spatial.params.northeast);
console.log(bb);
var selectedBoundingBox = new L.rectangle(bb,
{
color: 'blue'
});
selectedBoundingBox.addTo($scope.map); // <-- error here
}
I do get this error when running the code:
angular.js:13920 TypeError: t.addLayer is not a function
at e.addTo (leaflet.js:7)
at new FilterSpatialCardCtrl (filter_spatial_card.controller.js:50)
at Object.invoke (angular.js:4718)
at $controllerInit (angular.js:10354)
at nodeLinkFn (angular.js:9263)
at angular.js:9673
at processQueue (angular.js:16383)
at angular.js:16399
at Scope.$eval (angular.js:17682)
at Scope.$digest (angular.js:17495)
In your code there is over head, extra parameters too. Make it as simple as possible.
like:
angular.extend($scope, {
center: {
lat: 54.559322,
lng: -5.767822,
zoom: 14
},
defaults: {
maxZoom: 25,
minZoom: 1,
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
var markersFeatureGroup = new L.FeatureGroup();
leafletData.getMap()
.then(function(map) {
var latlang = L.latLng(50.5, 30.5);
var circleobj = L.rectangle([[54.559322, -5.767822], [54.560900, -5.760000]],{
color: 'blue'
}).bindLabel("Hello World", { direction: 'bottom', clickable: "interactive" });//use left, left, auto,
markersFeatureGroup.addLayer(circleobj);
map.addLayer(markersFeatureGroup);
});
Refer Jsfiddle for more information : http://jsfiddle.net/nidhiarya1245/5hukx0g5/
I want to add customized google map pin on my google map API. My image is big 135px(w) x 185px (h), i want to make it smaller , eg in 26px(w) x 35px(h) to looks fit in googlemap. Is that anyway can make the pin looks smaller besides resize the image using tools (ps/ai)?
How to add scaledSize?
var map = {
control: {},
center: {
latitude: xxx,
longitude: yyy
},
zoom: 17,
options: {
mapTypeControl: mapTypeControl,
mapTypeControlOptions: {
style: 1, // GoogleMapApi.maps.MapTypeControlStyle.HORIZONTAL_BAR
position: 1, // GoogleMapApi.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
zoomControl: zoomControl,
zoomControlOptions: {
style: 0, // google.maps.ZoomControlStyle.DEFAULT,
position: 5, // google.maps.ControlPosition.LEFT_CENTER
},
scrollwheel: true,
panControl: false,
scaleControl: false,
draggable: true,
maxZoom: 20,
minZoom: 15,
},
trigger: false,
bounds: {},
dragging: false,
events: {
dragend: function() {
},
click: function(map, eventName, args) {
},
idle: function() {
}
},
rebuildWindows: false,
templateUrl: 'templates/infowindow.html'
};
Thank you.
If the image you want to use as a marker is too big, the first (but obvious) advice should be to change the size of your image, to fit your needs.
However, you can do it programatically :
var customPin = new google.maps.MarkerImage("../path-of-you-pin/myPin.png"),
new google.maps.Size(21, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
// or use the size you want, this are the default sizes
And use it like this :
var marker = new google.maps.Marker({
// ...
icon: customPin,
// ...
});
launch: function() {
// The following is accomplished with the Google Map API
var position = new google.maps.LatLng(12.9833, 77.5833), //Sencha HQ
infowindow = new google.maps.InfoWindow({
content: 'bengaluru'
}),
//Tracking Marker Image
image = new google.maps.MarkerImage(
'resources/images/point.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
),
shadow = new google.maps.MarkerImage(
'resources/images/shadow.png',
new google.maps.Size(64, 52),
new google.maps.Point(0, 0),
new google.maps.Point(-5, 42)
),
trackingButton = Ext.create('Ext.Button', {
iconMask: true,
iconCls: 'locate'
}),
trafficButton = Ext.create('Ext.Button', {
iconMask: true,
pressed: true,
iconCls: 'maps'
}),
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype:'button',
id:'calculate',
text:'calculate',
handler:function(){
alert('hello');
}
}
]
});
var mapdemo = Ext.create('Ext.Map', {
mapOptions : {
center : new google.maps.LatLng(37.381592, 122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
plugins : [
new Ext.plugin.google.Tracker({
trackSuspended: true, //suspend tracking initially
allowHighAccuracy: false,
marker: new google.maps.Marker({
position: position,
title: 'My Current Location',
shadow: shadow,
icon: image
})
}),
new Ext.plugin.google.Traffic()
],
listeners: {
maprender: function(comp, map) {
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
}
}
});
Any ideas how can i measure distance between two destinations whose latitude and longitude are know........
this code is taken from the example provided by the sencha touch2 with little modification.
Its for sencha touch 2
try google.maps.geometry.spherical.computeDistanceBetween(from:LatLng, to:LatLng, radius?:number)
radius is the earth's radius = 6371000 metres (average)