Develop Reference

Microsoft.Maps.SDKMap is undefined, when creating object in BingMaps V8

While creating bingmap instance, SDKMap is undefined. Is there any missing credentials in following code?
function GetBingMap(){
var vcredentials = "<%=this.credentialKey%>" //credential Key
var vzoomLevel = Number("<%=this.zoom%>"); //Zoom Level
// Create the Map instance
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), //div map load
{
credentials: vcredentials, //credential
zoom: vzoomLevel, //zoom level
showZoomButtons: false, // enable Zoom Buttons
showLocateMeButton: false, // show Locate me button
showMapTypeSelector: false,//enable Map type selector
showScalebar: false,//enable scale bar
showTermsLink: false//enable terms link
});
this.map= map;

Make sure that the Bing Maps source code has loaded before calling your GetBingMap function. It sounds like it hasn't fully loaded before your code tries to create a map instance. If you are using async/defer in the script reference in the script tag, remove it.

Initializing two leaflet maps - one rewrites another

I'm trying to put multiple leaflet maps on one page, but I have problem with two of them - the second one rewrites the first one, so first one is rendering map, and the second has just grey area.
Here is the code:
var map_a = new L.Map( "smallMap", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.005, -0.09], 14);
var map_b = new L.Map( "smallMapSecond", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.505, -0.09], 14);
I have appropriate divs called smallMap and smallMapSecond. When I Initialize only one map, it works. Where could be the problem?

Well,one of the potential problems I see here without having a jsFiddle available is that you are using the same tileLayer osmMap for both maps. Sharing TileLayers between map instances is going to cause problems. Initialize tileLayers one per map.

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;
});
} ]);

Updating UI controls in Google Maps API v3

I have initialized and rendered a Google Maps object with my own UI-settings. Now when a user interacts I want to change what and where to display some of the controls. For instance I try to do this ->
map.mapTypeControl = true;
map.mapTypeControlOptions = {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.MapTypeControlStyle.RIGHT_CENTER
};
where map is my Google Maps object, but the map doesn't render it. What do I need to do to make my google Maps object update it's settings?
I've used this page as reference, https://developers.google.com/maps/documentation/javascript/controls, but can't figure it out.
A general answer on how to update these type of settings is most welcome.
Thanks!

Mistake from me. Should have done ->
map.setOptions({
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.ControlPosition.BOTTOM_CENTER }
});

Google map loads static image

I am using google map API in my project. My code is :
var map;
var op = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("container"), op);
My problem is that google loads a static image instead of an interactive map. I also tried
useStaticMap: false in options but after using this it loads nothing, (no map, no image).
Please tell me whats going on here?

150.644, -34.397, this coordinate doesn't exists

When you say static map does that mean that you can't zoom, pan, etc. It's been a while since I worked with Google Maps, but as I recall you can provide settings that would enable the zooming and panning. Try enabling those features as opposed to using the static map. Or conversely maybe you have disabled them.
I guess it could also be the javasscript file that you are including. Also, there are two API's and it seems like you can have two different API keys. Maybe you have the static one. So there are about three different options there. Most likely one of those is the issue because the code is very small and looks well formed to me.
API v3
https://developers.google.com/maps/documentation/javascript/tutorial
Static Maps
https://developers.google.com/maps/documentation/staticmaps/
I would try adding a control. Or maybe giving us a little more of your code.
Adding Controls to the Map
You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.
Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following Map options object's fields, which you set to true to make them visible or set to false to hide them:
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
The following example sets the map to hide the navigation (Zoom and Pan) controls and display the scale control. Note that we do not explicitly disable the default UI, so these modifications are additive to the default UI behavior.
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Here is the reference to the code.
https://developers.google.com/maps/documentation/javascript/controls