I am trying to set up Google map (v3) inside Joomla tabs but there is display problems on map.
If i move away from tab where the map is and change back map canvas is grey and map is displayed only partially on left corner of map canvas.
Image with screen capture:
I get this worked on other site by setting map size on map parameters but there was used Google map version 2 and i could not find correct syntax for setting map size on version 3 map.
Map options are set in global variable.
var mapoptions = {
zoom: 6,
center: new google.maps.LatLng(60, 50),
mapTypeId: google.maps.MapTypeId.ROADMAP,
gridSize: 50,
size(600, 700, 'px', 'px')
}
What is the correct syntax of map size or is there other solution for this?
I have tested resize function and playing with zoom but those was not helped.
I got this solved by adding short delay (100ms) before map initializing function call.
Maybe map canvas did not get fully rendered before google map was accessing it.
Related
I am confused with gsap's Flip.fit moving to coordinates.
I have a game board with 182 tiles and 182 playing tiles.
The goal
When the user clicks the bag, a random playing tile is selected and is "supposed" to move over the tile on the board.
If you change
Flip.fit(PTILE[tileArray], TILE[tileArray], {duration: 1 , scale: true});
when changing { duration: 0, ... } the move works as expected, however no animation. When duration is above zero, the final location is very random.
codepen
I'm not sure how the duration affects the final position, however, I found a way to get the positions right. That is reset the transform of your PTILE before telling GSAP to do the Flip animation.
// reset transform value
gsap.set(PTILE[tileArray], { transform: "" });
// animate with new transform value
Flip.fit(PTILE[tileArray], TILE[tileArray], {
duration: 1,
scale: true
});
My reason is that PTITLE and TITLE are placed in different <g> tags which means their transform systems are inconsistent. Plus, Flip.fit() will act like gsap.to() with new TITLE position is the to object, GSAP will try to calculate the from object from your original transforms which are already set in the SVG as transform:matrix(). This process, somehow, is messing up. So what I did is give GSAP an exact transform value for the from object, which is empty.
Ok, I found out that Inkscape stores the SVG with inline transforms that threw the animation off. I tried saving in plain or optimised, but still had no luck.
So there are two solutions.
Use SVGOMG an online SVG cleaner.
Use Affinity Designer application which can export and flatten transforms.
The key to rule out other factors is to use relative coordinates and flatten transforms.
I have included a screenshot of Affinity exporting options.
Affinity Export screenshot
In iOS when I put marker and mapView location, the map does not display centered, but if I move the phone to landscape and rotate again to portrait the map center displays fine.
In Android works fine.
You can get more information in this GitHub issue:
https://github.com/dapriett/nativescript-google-maps-sdk/issues/322
I have personally faced this and discovered that it's basically a layout problem on iOS. The height and width attribute values supplied to the MapView's XML element are somewhat differently treated by iOS. The solution to our problem, as described in the question itself is resizing the map on runtime (as rotating the screen makes it go through a resizing routine). Applying this absurd logic at the beginning of the map render, solves the problem.
This is how I did it:
Provide the width value of the MapView in XML:
<maps:mapView width="100%" mapReady="onMapReady" />
and set the height of the map inside onMapReady method, with a 100 millisecond delay.
/* if you want to set height in DIP */
setTimeout(() => this.mapView.height = 500, 100);
or if you want to set height in percentage
/* [0.85 means 85% here] */
setTimeout(() => this.mapView.height = {
unit: '%',
value: 0.85
}, 100);
100 millisecond delay makes it go through the resize effect. Tested on iOS 12.1
I am using google map in my angular2 app. I have also used MarkerCluster as below.
for (let marker of this._markers) {
let lat = +marker.latitude;
let long = +marker.longitude;
let markerobj = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: marker.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
fillOpacity: 0.8,
fillColor: '#5A7793',
strokeColor: '#FFFFFF',
strokeWeight: 2,
},
map: this.map,
visible: true,
});
this.markerLayer.push(markerobj);
latlngbounds.extend(markerOnMap.getPosition());
markerList.push(markerOnMap);
}
let markerCluster = new MarkerClusterer(this.map, markerList, { imagePath: '../assets/images' });
I want to show around 100000 markers on google map. I am facing lot of performance issues when i tried to plot 100000 markers.
As per client requirement I can not use other map libraries. I need to stick with Google Map.
Do you have any suggestion which help me to improve the performance.
You don't plot 100,000 markers at once. What you need to do is reduce the amount of data you are displaying at a time. Only display individual markers when you are zoomed in so there are not so many markers in the view.
So what I would suggest is that load the markers from the server based on the bounds of your google map. So that would be the coordinates at the top left and bottom right.
So lets say you have 100,000 markers spread all over the world. At the world view it would be best not to show anything and ask the user to zoom in. Once you are at a lower zoom level use the bounds of the map to get markers from the server which lie inside those bounds. This should reduce the number of markers you have to display substantially. I don't know the coverage of your data but you can figure out what zoom levels work best for you.
There is an issue on a site I have been working on that for some reason the SVG image markers are not showing up in IE 11.
I have two sets of markers:
the default zoomed out has PNG markers for the suburbs
zoomed in has address specific numbered SVG ones
I use a fallback for older browsers that don't support SVG (testing it with modernizr). I am using the old Google Chart markers for IE 11 to get it to work (testing the user agent string to id it).
I want to know if anyone has an idea as to:
the cause
whether it is something screwed up with IE11 Edge mode (switch the document mode to 10 to get it to work)
or something that is failing with Google.
The site is:
http://artstrail.org.au/arts-trail.php
You can see it fail if you change the user agent string in IE 11 while leaving it in Edge Document mode.
It seems that Google Maps doesn't really support using SVG images for markers at the moment. This fact is easy to overlook, because it turns out that SVG marker images do actually work in, eg. Chrome and Opera.
However, the Google Maps API (v3) specifically provides Symbol objects for displaying vector paths in map markers. I found that specifying the vector image in SVG path notation allowed it to work in IE and other browsers.
Example (from Google Maps docs, here):
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 1,
strokeColor: 'gold',
strokeWeight: 14
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: goldStar,
map: map
});
(Thanks to this answer too)
Actually, for me adding marker optimized: false and icon scaledSize: new google.maps.Size(25, 25) does it for me. So even if what Nick F says is true (that it's not officially supported), it works.
SVG markers start showing up in IE11. It seems that the scaledSize adds a style width and height on the <img> element, unsure what optimized does in this case.
Example:
var marker = new google.maps.Marker({
map: map,
position: poi.geometry.location,
title: poi.name,
zIndex: 99,
optimized: false,
icon: {
url: 'loremipsum.svg',
scaledSize: new google.maps.Size(25, 25),
size: new google.maps.Size(25, 25),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(12.5, 12.5)
}
});
Credit: Google Maps SVG marker doesn't display on IE 11
The IE implementation deviates from the SVG standard in the following ways:
Properties of a marker element inherit at the point of reference, not from the ancestors of the marker element.
References
MS-SVG: The 'marker' element
Add meta to emulate IE10/IE9 if the SVG supports in lower IE versions.
ie) for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
I developed an script to display 2 layers ob base map.
but it is not zooming properlly.
I am using following code
can you please suggest me
<script type="text/javascript">
var map, layer, select, hover, control;
function init(){
map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.Navigation()
]
});
layer = new OpenLayers.Layer.WMS(
"States WMS/WFS",
"http://localhost:8080/geoserver/topp/wms",
{layers: 'topp:india_road',transparent: true}
);
select = new OpenLayers.Layer.Vector("Selection", {styleMap:
new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
});
hover = new OpenLayers.Layer.Vector("Hover");
map.addLayers([layer, hover, select]);
var wmsLayer = new OpenLayers.Layer.Google('Google Layer',{} );
map.addLayer(wmsLayer);
map.setCenter(new OpenLayers.Bounds(143.83482400000003,-43.648056,148.47914100000003,-39.573891).getCenterLonLat(), 5);
}
</script>
What do you mean by not zooming properly?
Are you finding that they are not matching up with the google maps when zooming in as far as you can go, or the zoom work until you try to pan and then the layers don't stay lined up with google maps? If this is the case then you are probably zooming in further than is supported by the Google map service. There is no easy way to fix this and I recommend you alter allowed scales and zoom with the following settings
minScale - float -- the minimum scale value at which the layer should display
maxScale - float -- the maximum scale value at which the layer should display
numZoomLevels - int -- Total number of zoom levels
Also please see this link on more information about google zoom scales.
If you are finding that none of your layers match the google background. I.E. they look like they are zoomed in out or offset then it is likely that your data is in a different projection to the google maps layer. Google maps uses EPSG:900913 as their SRS. The eisiest way to do this is to let geoserver do the re projection for you. Go to your layer setting in geoserver make sure you have the native projection set correctly and set the declared SRS to EPSG:900913.
If that doesn't help then I think we need more information on exactly what the problem is.