Develop Reference

Create a smart, interactive map like the ones used on the FourSquare site

First off, I'm trying to create something like this using Angular.js: https://foursquare.com/explore?mode=url&near=San%20Francisco%2C%20CA&q=comedy
In summary, here are the tools I've tried:
Mapbox.js
Leaflet.js
Angular-Leaflet directive
For each, I've attempted to create a directive that would manage a list of locations that is associated with a map displaying those locations such that, when the user hovers over a list item, a tooltip appears above the location's marker on the map, and when they hover atop the location's marker on the map, a tooltip appears above that marker. (If this isn't clear, just visit the link above.) Hyperlinks, image, etc. should be able to appear within the tooltip. None of the above seem to give me the map portion of this functionality straight out of the box. Also, in order to even get markers to appear on the map, I have to essentially break away from idiomatic Angular, since the markers are vector items that are generated via the Leaflet/Mapbox toolkit. Writing this code feels wrong. Yes, I'm able to see the marker, but I can't really associate them with anything in the DOM. I'm confused.
I'm just at a loss for how to create a smart, interactive map that is associated with other elements on my page. Libraries like Angular-leaflet allow you to get a map on your page pretty easily, but customization is PAINFUL (or so it seems). Is Angular.js, in combination with any of the above three tools, the way to go? Is there something I'm simply failing to understand?

in angular-leaflet-directive, you can bind marker events.
here is an example that implements the dragend event (taken from here). you should be able to use the mouseover event, get the hovered marker from the events arguments and show it's popup.
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', [ '$scope', function($scope) {
var mainMarker = {
lat: 51,
lng: 0,
focus: true,
message: "Hey, drag me if you want",
draggable: true
};
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
markers: {
mainMarker: angular.copy(mainMarker)
},
position: {
lat: 51,
lng: 0
},
events: {
markers: [ 'dragend' ]
}
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args){
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
} ]);

AngularJS Google Map directive map instance

I'm using http://angular-google-maps.org/ it's nice angular google maps library. But i want use map instance which is loaded not in angularjs context by something like this:
$scope.map = {
events: {
tilesloaded: function (map) {
$scope.$apply(function () {
$scope.mapInstance = map;
});
}
}
}
Ok nice i have mapInstance and I CAN use it programmatically. But in application lifecycle this fire to late- so in other words I want to load whole directive (and get map instance) before other code- where I just wan't to use other map events.

In recently looking up ways to get the map instance from the example on the docs page, I came across this instead:
$scope.map.control.getGMap().
Make sure on your google-maps HTML markup, you have the options attribute set as control="map.control" and an empty object set in your $scope.map object.
$scope.map= { control : {}, ...other map options...};
That empty objects is filled when google map is initiated. I hope this helps and isn't too late.
Enjoy Angular!!!

Map fluid motion with the latest mapbox (1.6.2) API, how to achieve?

Once it was possible to achieve the fluid motion with Easing Mapbox methods
https://www.mapbox.com/mapbox.js/api/v0.6.7/#mapbox.ease
but the latest API have changed dramatically, is it be possible to achieve the smooth map motion with the modern API?
Using of the old version, still stable 0.6.*, is not the case since a lot of new features are very useful.

#mourner mentioned this in his last blog post; Leaflet 0.8 should include this and the pull request still appears to be open. You may be able to use the 0.8-dev branch to get the map.zoomPanTo animations with this.

I've found some discussion on leaflet: https://github.com/Leaflet/Leaflet/pull/1617
That suggests this call
map.setView({ lat, lon }, 15, {
pan: { animate: true },
zoom: { animate: true }
});
But after checking source of setView function it seems that setView is trying to smooth transit when the next point is one window close to the previous
map.setView({ lat, lon}, 15);
Useful links
LatLng(): https://www.mapbox.com/mapbox.js/api/v1.6.1/l-latlng/
panTo(): https://www.mapbox.com/mapbox.js/api/v1.6.1/l-map-class/#map-set-methods

Angular google Maps

Hi i am currently working on angular Google maps https://github.com/dylanfprice/angular-gm
i am facing difficulties in setting the bounds and map center
<gm-map gm-map-id="'infoWindows'" gm-center="options.map.center" gm-zoom="options.map.zoom" gm-bounds="bounds" gm-map-options="options.map" class="map">
<gm-markers gm-objects="clinics"
gm-get-lat-lng="{ lat: object.practice.latitude, lng: object.practice.longitude }"
gm-get-marker-options="{ title: object.practice.name }"
gm-on-click="clk = object; infoWindow.open(marker.getMap(), marker);">
</gm-markers>
</gm-map>

make sure your map is already loaded.
therefor it is highly recommended to use promises.
var gmapPromise = angulargmContainer.getMapPromise('<mapId>');
gmapPromise.then(function(gmap) {
$scope.myGoogleMap = gmap;
});
In your case would be 'infoWindows'.
as there is to less context in your question, i can't really give you an answer what is wrong with your particular code but i'll give you some snippet which is always useful:
$scope.updateGoogleMap = function(map, options) {
// triggers a resize of the map and sets the correct center position
// requires a google map object and a google maps mapOptions object
$timeout(function(){
google.maps.event.trigger(map, 'resize');
map.setOptions(options);
});
};
a Google Maps mapOption object looks like this:
{
center: new google.maps.LatLng(47.123, 10.123),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
as ng-hide/show lead to some google maps resize misbehaviour, you might wanna call this when toggling views.
**by the way, if your are using the gm-map-options tag with a valid google.maps.MapOptions, you don't need the the extra 'gm-bounds', 'gm-zoom' or 'gm-center' arguments

customizing google maps V.3 streetview controls

I've got one instance of google maps with fully customized options in my app.The users are able to switch to street view if they want to and come back all with the same instance of the map.
Is there a way to customize streetview controls when creating the map instance, along with the other map options?
I can not see any documentation on how to do that on the main map, while if you directly instantiate a the street view on a separate dom element you can do that like this:
var panoramaOptions = {
zoomControl: false,
linksControl: false,
panControl: false
}
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_streetview"), panoramaOptions)
mymap.setStreetView(panorama)
Any hint?

You may access the streetView-property of a map(no matter if custom or default) by using the getStreetView()-method of the map.
Use the setOptions()-method of the streetView to set the options:
mymap.getStreetView().setOptions(panoramaOptions);