i have a weird behavior of Google maps using dart !! here
as you see the link responsible for making th map appears is "Géolocalisation" until now i have no problem! but when i reclick, or when i visit another link then returning back to "Géo.." it gaves me this and i really don't know what to do! this is my first try at GMap so i need a littel bit of help please.
i must mention that the page doesn't refresh when i click at the link it's only delets the old content from the container div then add the new elements also i must mention that i'm using bootstrap3,this is the code for the page géo
import 'package:google_maps/google_maps.dart';
import '../view.dart';
import 'dart:html';
//view Map
class viewMap extends View{
panelCoreBuilder(){
//creating the container layout and it is a div row
DivElement layout = new DivElement()..className="row";
//adding a style element for the map element inside the container
layout.children.add(new StyleElement()..text="#mapblock{margin: 0;padding: 0; height: 500px; width: 100%;");
DivElement cellone = new DivElement()..className="col-md-3";
//naming the block that contains the map
DivElement celltow = new DivElement()..className="col-md-9"..id="mapblock";
//adding the cells to the layout
layout.children.addAll([cellone,celltow]);
//creating the map
visualRefresh = true;
final mapOptions = new MapOptions()
..zoom = 8
..center = new LatLng(34.034453, -5.885925)
..mapTypeId = MapTypeId.ROADMAP;
final map = new GMap(celltow, mapOptions);
//returning the layout to the MainContainer...
return layout;
}
}
so that's it i hope you can give me any solution ,hypotheses ,or even a hint
and if i fond the solution first i'll post it here!
This is likely that your <div> has an empty size (or not displayed) when the new GMap is called. The map is not aware of the <div> container resizing by default. You have to manually trigger a resize event when you display it on the screen with :
event.trigger(map, 'resize', []);
Related
I'm searching for a way to convert longitude/latitude to pixels relative to a Map view. Basically, I'm looking for something similar to Projection.toPixels(), as described here.
What I want to do is the following: I need to add annotations with background images and texts on them, and since such a feature is not possible with the default annotations, I have to somehow calculate their position in the Map view and add labels (as children views), instead.
I've spent almost a week working on it, without any result.
There is a property on an annotation to set its image and a title that will displayed when clicked (hover over it). see here:
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.Map.Annotation-object
Is this not exactly what your looking for?
I don't have a way to convert lat/lng to pixels, but I do have a way to get images and text on annotations. It is kind of a "hackish" way to do it, but it works. Basically, all you do is create a custom view with whatever you want in it. After you have your view setup, then for the image property of the annotation, you set it to yourCustomView.toImage().
Here is an example:
//Setup device size variables
var deviceWidth = Ti.Platform.displayCaps.platformWidth;
var deviceHeight = Ti.Platform.displayCaps.platformHeight;
//Create a new window
var w = Ti.UI.createWindow({
width:deviceWidth,
height:deviceHeight
})
//Create view for annotation
var annotationView = Ti.UI.createView({
width:50,
height:50,
backgroundImage:'http://www.insanedonkey.com/images/bubble.png',
})
//Add text to the annotation view
var annotationText = Ti.UI.createLabel({
width:'auto',
height:'auto',
text:'785k',
font:{fontSize:12,fontWeight:'bold'},
color:'#fff',
})
annotationView.add(annotationText);
//Create a new annotation
var newAnnotation = Titanium.Map.createAnnotation({
latitude:36.134513,
longitude:-80.659690,
animate:true,
image:annotationView.toImage() //Convert the annotationView to an image blob
});
var mapview = Titanium.Map.createView({
region:{latitude:36.134513, longitude:-80.659690, latitudeDelta:0.0009, longitudeDelta:0.0009},
animate:true,
regionFit:true,
userLocation:true,
annotations:[newAnnotation],
mapType:Titanium.Map.STANDARD_TYPE,
width:2000,
height:2000
});
//Add the mapview to the window
w.add(mapview);
//Open the window
w.open();
I hope this helps out.
I'm using the last Flex 4 sdk Hero.
i setup a classic List component with InteractionMode="Touch". Thus, my vertical scroll bar is not visible until i drag the list ,which is normal.
My customer ask me to add some "page down" button on the list. I've done it as follow, which work perfectly :
private function handleDownButton(event:*):void {
var currentPosition:Number = wcList.scroller.viewport.verticalScrollPosition;
var nextPosition:Number = currentPosition+((wcList.dataGroup.layout) as VerticalLayout).getVerticalScrollPositionDelta(NavigationUnit.PAGE_DOWN);
var anim:Animate = new Animate(wcList.scroller.viewport);
anim.motionPaths = new <MotionPath>[
new MotionPath("verticalScrollPosition")];
anim.motionPaths[0].keyframes = new <Keyframe>[
new Keyframe(0), new Keyframe(500, nextPosition)];
anim.play();
if ((nextPosition+wcList.height)>=wcList.scroller.viewport.contentHeight) {
buttonDown.enabled=false;
}
buttonUp.enabled = true;
}
My big problem is that my customer also want the vertical scroll bar to be visible during the animation, but i can't find a solution for this (wcList.scroller.verticalScrollBar.visible = true don't work at all).
Any idea of how doing this?
Thanks.
A hack that might work for you...
http://flexponential.com/2011/06/21/using-drag-and-drop-with-a-spark-list-in-a-mobile-flex-application/
For instance the mx.controls.Image objects are only displayed when i add them directly to the main application object. If i add a "subimage" to the previously created Image object it simply doesnt show. Why ? What concept did i miss ?
What I want to do:
var img : Image = new Image;
var subimg : Image = new Image;
img.source = "images/panel.png";
subimg.source = "images/panel.png";
subimg.x = 10;
subimg.y = 10;
addChild (img);
img.addChild(subimg); // img is displayed, but not the overlapping subimg
OK, and here the code how it by directly adding the subimg to the Application just like img - this one works ofcourse:
var img : Image = new Image;
var subimg : Image = new Image;
img.source = "images/panel.png";
subimg.source = "images/panel.png";
subimg.x = 10;
subimg.y = 10;
addChild (img);
addChild(subimg); // img & subimg is displayed correctly
What exactly is it that you want to do, that the second example isn't doing for you? Generally speaking UIComponents are things with complicated internals, being that they're skinnable and styleable and so on, and they manage their own contents (as with Image, which populates itself with loaded assets).
I'm not familiar enough with Image to say precisely what the problem is - whether the subimg object is being hidden or whether the load is failing, or what. But what you should probably do is to make your own Sprite and add both Images inside it, or make two sprites, add an image to each, and parent them the way you like, so you can have a similar parent-child relationship without mucking around in the internals of a component.
For example:
// ... make img and subimg
var imgContainer:Sprite = new Sprite();
imgContainer.addChild(img);
var subimgContainer:Sprite = new Sprite();
subimgContainer.addChild(subimg);
imgContainer.addChild(subimgContainer);
addChild(imgContainer);
Instead of Google Maps API's default info window, I'm going to use other jQuery tooltip plugin over marker. So I need to get marker's DIV and its pixel position.
But couldn't get it because there are no id or class for certain marker. Only I can access map canvas div from marker object and undocumented pixelBounds object.
How can I access marker's DIV?
Where can I get DIV's pixel position? Can I convert lat-lng position to pixel values?
==
appended:
I also tried with below code, but it doesn't change when I scroll the map.
var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, 'click', function() {
var px = this.getMap().getProjection().fromLatLngToPoint(this.getPosition());
console.log("(" + px.x + "," + px.y + ")");
});
I don't really get why would you want to get specific div for marker? If you want to display tooltip then all you need is pixel position of markers anchor (and knowledge about size of marker and placement of anchor), not div element. You can always trigger opening and closing tooltip by hand when event occurs on google.maps side.
For getting pixel position of anchor of given marker you can use this code:
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
In pixelDistance you get offset of specific marker anchor counted from left upper corner of the map (and you can get it's position from map.getDiv() div). Why it works like this (or is there a better way?) you can read in documentation of google maps overlays.
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);
You can now access your pixel coordinates through p.x and p.y.
FOLLOWING ADDED POST COMMENT:
The downfall of the overlay projection is that until it your map canvas finishes loading it isn't initialized. I have the following listener that will force whatever method I need to trigger when the map does finish loading.
google.maps.event.addListener(map, 'idle', functionName());
In the mean time I use the following check to avoid any errors before it does draw.
if(overlay.getProjection()) {
// code here
}
One thing to remember when using MBO's code:
When the map tiles are repeated, map.getBounds().getSouthWest() returns "-180" independent of the map's position. A fallback I'm using in this case is calculating the pixel distance to the center instead of the upper left corner, since map.getCenter() seems to return the currently centered point in any case. E.g. (using jQuery):
// Calculate marker position in pixels form upper left corner
var pixelCoordsCenter = map.getProjection().fromLatLngToPoint(map.getCenter());
pixelOffset = new google.maps.Point(
Math.floor((pixelCoordsMarker.x - pixelCoordsCenter.x) * scale + $(container).width()/2),
Math.floor((pixelCoordsMarker.y - pixelCoordsCenter.y) * scale + $(container).height()/2)
);
anyone still looking for an answer to this, have a look here: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
among some other useful google maps stuff there's RichMarker which allows you to add DOM elements of your choice as draggable markers. just add class/id to handle with jQuery.
Rene's answer only gives you the "world coordinates" (that is, coords independent of zoom level and viewport). MBO's answer seems right, though, so that's the one you should accept and vote up (I can't as I just registered) as the solution might easily be overlooked otherwise.
As for an "easier" version, you can use the methods in MapCanvasProjection instead, but that means you'll have to make your own overlay. See here for an example. :P
MapCanvasProjection's fromLatLngToContainerPixel() is probably what the author's after. It will give you the pixel offset relative to the map's container. I did some experiments and found the "simplest" working solution. (I wish Google makes this feature more accessible!)
First you declare a subclass of OverlayView somewhere like so:
function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};
Then somewhere else in your code where you instantiate the map, you also instantiate this OverlayView and set its map, like so:
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
// Add canvas projection overlay so we can use the LatLng to pixel converter
var canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);
Then, whenever you need to use fromLatLngToContainerPixel, you just do this:
canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);
Note that because the MapCanvasProjection object will only be available once draw() is called, which is sometime before the map's idle, I suggest creating a boolean "mapInitialized" flag, set it to true on the first map idle callback. And then do what you need to do only after that.
Well, if you MUST access the DIV, here's some code. Beware that this will only work with the standard marker (20x34px), and it'll find all markers. You might want to improve this hack to suit your needs...
BEWARE! THIS IS A HACK
var a=document.getElementById('map_canvas');
var b=a.getElementsByTagName('img');
var i, j=b.length;
for (i=0; i<j; i++) {
if(b[i].src.match('marker_sprite.png')){
if(b[i].style.width=='20px' && b[i].style.height=='34px') {
c=b[i].parentElement;
console.log(c.style.top+":"+c.style.left);
// this is a marker's enclosing div
}
}
}
A working snippet jQuery style ready to copy/paste:
step 1 - initialize your map and options
<html>
<head>
<script src="get-your-jQuery" type="text/javascript"></script>
<script src="get-your-maps.API" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var bucharest = new google.maps.LatLng(44.43552, 26.10250);
var options = {
zoom: 14,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
As you can see, lower, the variable map is not preceded by VAR, because it should be Global as we use another function to get the fromLatLngToContainerPixel. For more details check closures.
map = new google.maps.map($("#map_canvas")[0], options);
var marker = new google.maps.Marker({
position: google.maps.LatLng(44.4407,26.0864),
map: map
});
new google.maps.event.addListener(marker, 'mouseover', function(){
placeMarker( marker.getPosition(),'#tooltip');//param1: latlng, param2: container to place result
});
new google.maps.event.addListener(map, 'bounds_changed', function(){
$("#tooltip").css({display:'none'}); //this is just so you can see that all goes well ;)
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
}); //here ends jQuery.ready
function placeMarker(location, ID){
var containerPixel = overlay.getProjection().fromLatLngToContainerPixel(location);
var divPixel = overlay.getProjection().fromLatLngToDivPixel(location);
$(ID).css({top:containerPixel.y, left:containerPixel.x, 'dislay':'block'});
}
//-->
</script>
</head>
<body>
<div id="tooltip" style="width:100px; height:100px; position:absolute; z-index:1; background:#fff">Here I am!</div>
<div id="map_canvas" style="width:300px; height:300px"></div>
</body>
</html>
I found it's easiest to assign a custom icon and use the img src attribute to get to the element. You can still use the default google maps icon, just save it locally.
$("#map img[src='my_marker.png']").getBoundingClientRect();
For many circumstances the complex math used the calculate and change the pin position in the accepted answer may be appropriate.
For my particular use I just created a transparent PNG with a canvas significantly larger than I needed for the icon. Then I just experimented moving the pin around within the transparent background and applying the new image to the map.
Here is the spec for adding the custom pin image, with examples:
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
This method will definitely scale as an offset in pixels instead of an actual different long/lat even when you zoom in.
Try this way, got div by event.
marker.addListener("click", markerClicked);
function markerClicked(event) {
// here you can get the marker div by event.currentTarget
}
Pretty simple request, but there doesn't seem to be a way to do it. I just want my GMarkers to be green instead of red.
Do I really have to make my own icons?
This is the simplest method:
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
var markerOptions = { icon:greenIcon };
var marker = new GMarker(point, markerOptions);
That marker image is Google's, but you could also use your own.
MapIconMaker is great if you need to generate unique markers on the fly.
The best way I have found is with the following scripts...
labeledmarker.js
mapiconmaker.js
you then need the following code snippet:
var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = "#66CC6600";
iconOptions.cornerColor = "#66CC6600";
iconOptions.strokeColor = "#000000FF";
var iconSeller = MapIconMaker.createMarkerIcon(iconOptions);
function createMarker(icon, point,html,label)
{
opts =
{
"icon": icon,
"labelText": label,
"labelClass": "markerLabel",
"labelOffset": new GSize(-4, -31)
};
var marker = new LabeledMarker(point, opts);
GEvent.addListener(marker, "click",
function()
{
marker.openInfoWindowHtml(html);
});
return marker;
}
Make sure you have a class in your stylesheet called markerLabel so you can style the div which contains the label. I pinched most of this code from the excellent econym tutorial site where there are many clear examples and code samples.
See this: Map Overlays > Markers > Icons
Icons
Markers may define an icon to show in
place of the default icon. Defining an
icon is complex because of the number
of different images that make up a
single icon in the Maps API. At a
minimum, an icon must define the
foreground image, the size of type
GSize, and an icon offset to
position the icon.
The simplest icons are based on the
G_DEFAULT_ICON type. Creating an
icon based on this type allows you to
quickly change the default icon by
modifying only a few properties.
It looks like this is the simplest case. You use G_DEFAULT_ICON as the base GIcon, then extend it by altering the .image property of that new object. The simple example is pretty simple.
I need project for add gmarker in map and getting data from web services