I am using Google Maps API V3. I am trying to animate a marker on the Polyline smoothly.
I have Tried this http://jsfiddle.net/bmSbU/154/
Here I have made fixed points as (30,-110) and (30,-100) so I can able to make based on the fixed points.
Now my question is how to do the same when I have multiple points (PolyLine) and the marker should move smoothly without any flicking on map.
var map;
var path;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(35, -105);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
route = new google.maps.Polyline({
path: [
new google.maps.LatLng(30, -110),
new google.maps.LatLng(30, -100)],
map: map
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(30, -110),
map: map
});
counter = 0;
interval = window.setInterval(function () {
counter++;
var pos = new google.maps.LatLng(30, -110 + counter / 100);
marker.setPosition(pos);
if (counter >= 1000) {
window.clearInterval(interval);
}
}, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);
Can anybody help me out?
Your jsfiddle plays smoothly for me on the latest version of Safari on a newer macbook pro. YMMV with different hardware/platforms.
Fundamentally, CSS animations generally outperform similar animations implemented in Javascript. I think the Google Maps API is going to cause animation artifacts when you call Marker#setPosition() via timeout internals. See this answer for How to add custom animation on Google Map V3 Marker when I drop each marker one by one? for a deep dive into hacking how Google internally implements the google.maps.Marker#setAnimation method using CSS animations.
Another option is to stop using Google's Marker type, and implement a custom marker type that supports custom CSS animation. This is not as hard as it sounds. Check out a blog post by Mike Bostock on using D3 for custom markers on Google Maps.
Related
I am using a theme that had only came with js.minifiy. I am able been able to get a marker to show however that it. No description of place nor is the label clickable. I have tried quite a few things but I cannot fix this. Since the theme is using js.minify do i need to make changes in that file? Not sure I need an API but I did set up a Google Maps Javascript API. Should I include that in js.minify? I uploaded the default theme files for testing and help would be appreciated.
http://vineblock.trade
google.maps.event.addDomListener(window, 'load', googleMapsInit);
function googleMapsInit() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(-34.8679988, 138.5118251),
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
icon: 'images/label.png',
position: new google.maps.LatLng(-34.8679988, 138.5118251),
map: map,
title: 'Carros'
});
}
I'm giving cordova an honest shot (via ionic cli) and it's going pretty well functionally but the UX screams non-native. Here's my current implementation:
Here's an example from where I got my initial maps code
index.html
...
<script src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry"></script>
...
templates/map.html
...
<div id="map" data-tap-disabled="true"></div>
...
MapCtrl
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
//google.maps.event.addDomListener(window, 'load', initialize);
ionic.Platform.ready(initialize);
});
how I initiate a marker in MapCtrl
var marker = new google.maps.Marker({
map: $scope.map,
position: o.getLatLng(),
icon: {
url: thumb, // "img/somethumb.png"
scaledSize: new google.maps.Size(62, 62), //size
// origin: new google.maps.Point(0, 0), //origin
anchor: new google.maps.Point(30, 108) //anchor
}
});
In my journey of making the UX more friendly on better-performance devices every now and again I find a glimmer of something helpful and then it turns out to be a hack that doesn't help much. There has to be some way to get a more native feel out of this code. Here are some issues I would like to smooth over:
new map images don't load until the user releases ALL touches after a pinch/zoom
markers do not resize until the user releases ALL touches after a pinch/zoom
uses bitmap images as opposed to vector (html5 canvas?)
I'm sure there's more to improve but I'm starting small for now. What are some things I can do to make API work with a more native feel?
new map images... this behavior is on the desktop not only on mobile. This is to save resources (given that you have done number of native apps you haven't run into this requirement.
markers do not resize... this would be considered a nice to have and not necessary, this behavior doesn't hinder the usability of the application. In the end is an application not a game.
bitmap vs vector, the application has to support several devices. Why make 2 versions when the bitmap works well? See the browser requirements and limitations of some one that has developed a vector/html5 version http://simplemaps.com/us
I used to use an iFrame to embed a Google Map in a web page, but have recently switched to the JavaScript API to give myself more flexibility.
I am loading the map using the co-ordinates, which is working relatively well.
However, when I view a business on Google maps or in an iFrame for that matter, I can see the business I'm trying to focus on, highlighted in red:
But I can't seem to achieve this with the API -- which sometimes doesn't show the business name at all, let alone highlight it red. I've used DHL as an example here.
How can I 'bind' the map to a business location using the JS API?
My current script looks much like the one provided by the Google walkthrough pages:
function initialize() {
var longLat = { lat: 52.8004265, lng: -1.6334708},
mapOptions = {
center: longLat,
zoom: 18,
scrollwheel: false,
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
var marker = new google.maps.Marker({
position: longLat,
map: map,
title:"DHL"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can attach infowindow to your marker and display the business name in that way. Here is an example
And here's another example using customized label as a marker, and it can contain the business name. Example
Below is some javascript based on the Google Maps documentation. It should display a marker at the LatLng coordinates indicated. However, it is showing the map only without the marker. Can someone point out what I've done wrong? I've been staring at this for a long time and can't figure it out. Also, I need to modify this code to accept two arrays of marker coordinates. Each array is to get a different marker icon: red.png, yellow.png and blue.png. I plan to eventually get the coordinates for each marker group by calling a server-side webmethod (C#). But for simplicity let's ignore that requirement for the moment and assume we have three static arrays. Can someone show me what I need to do? I've seen a lot of similar questions on S.O. but none of the answers seem to work for me.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&sensor=true">
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(39.50, -98.35),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
map.addOverlay(new google.maps.Marker(
new google.maps.LatLng(39.50, -98.35)));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Markers are created as:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(39.50, -98.35),
map: map
//, ...
});
I'm trying to add a few tweets to an infowindow in Google Maps. I get the tweets to display in a div that is the content of my infowindow, but it's the wrong size.
I thought by calling 'content_changed' when the marker is clicked, the infowindow would resize - it doesn't.
I'm sure this is pretty straightforward, can someone help me out?
Thanks,
James
var myLatlng = new google.maps.LatLng(51.500261,-0.126793);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById("station"));
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.open(map,marker);
});
Try to call infowindow.close(); before open(). I'm pretty sure that it will force it to rerender
This isn't exactly a supported solution, but after poking around in Firebug, I found an easy way to force a resize on the window:
infoWindow.b.contentSize = new google.maps.Size(w, h);
google.maps.event.trigger(infoWindow.b, 'contentsize_changed');
As far as what the real W/H should be set to on the first line, that's a matter of looking at infoWindow.b.contentNode and getting a real width/height either through the standard properties or jQuery's methods.
I'm not sure exactly what infoWindow.b is, but it seems like it's some sort of "content" object. I wish they would expose this and document it.
I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());