Google Maps JavaScript API V3 Not Required API Key

Google Maps JavaScript API V3 does not require an API key, yes, you can choose use an API key or not.

The Google Maps JavaScript API v3 does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application’s Maps API usage. Learn how to use an APIs Console key.

About API V2, Google has mentioned that they do not recommend (officially deprecated) .

image

If you do not put API key:

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

If put API key:

<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=[Your Key]&sensor=false”></script>

Bing Maps Services

We can use Bing Map Services directly to implement our Bing Map project.

Firstly you should have a Bing Map develop account which is free to register.

The starter page is here, you can learn lots of methods which Microsoft provided.

For example: If you want to put a static Bing map on your site, you might choose a map image, but you can directly load a URL style service to get the image on the web page.

For example, if you copy the following link to your web browser directly, and replace the “yourBingMapDevString” using your real Bing map developer key;

http://dev.virtualearth.net/REST/v1/Imagery/Map/AerialWithLabels/m4l1s1?mapSize=800,600&&key=yourBingMapDevString

You will get a map image which the center is the location which post code is M4L1S1:

bingmap00

A Sample of Integrating Bing Map and Geonames using ASP.NET

Some of Bing map and Google map services are not free, For example, They will not provide a free Geo database to developer.

Fortunately there are some open source geo information websites. Geonames.org is the one great open source and free geo services provider.

About Geonames.org:

The GeoNames geographical database is available for download free of charge under a creative commons attribution license. … The data is accessible free of charge through a number of web services and a daily database export. GeoNames is integrating geographical data such as names of places in various languages, elevation, population and others from various sources. All lat/long coordinates are in WGS84 (World Geodetic System 1984). …

We found a good sample from Midnighprogrammer.net. This is a nice sample of

Integrate Bing Maps With Geonames Database And ASP.NET

Start to Develop Bing Map Application (2)

We have finished the first step: Apply a Bing map key to develop Bing map application.

Now we are going to write code for a simple Bing map application. What we first need to do is install Bing map SDK, we have already had an article about Bing map SDK. but the SDK information updated by Microsoft, so please find the newest Bing map SDK from Microsoft official site and download proper SDK package for your application.

For example, if you want to create a Bing map application using Silverlight, you should download Bing map Silverlight controls. The download place is here. After your download, you will find a file named “BingMapsSilverlightControlv1.0.1Installer.msi”. double click to install the Bing map SDK.

Now we use Visual Studio 2010, create a new Silverlight Application:

bingMap05

In the project, right click the Silverlight Application’ references folder to Add Reference.

bingMap06

Locate the installing Bing map SDK folder, just like the following:

bingMap07

There are two dll files under the Libraries folder:

Microsoft.Maps.MapControl.Common.dll
Microsoft.Maps.MapControl.dll

Add these two files as references.

Note: You do not need to download the control if you are only going to use the embedded maps feature or if you want to access the Bing Maps Silverlight Control using JavaScript. These features are described in the Embedding a Map into Your Web Page and the Accessing the Control Using Script topics. – From MSDN

Open MainPage.xaml, you can see the following code:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White"></Grid>
</UserControl>

Changed above code to below code:

<UserControl x:Class="SilverlightTestApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl">
    <Grid x:Name="LayoutRoot" Background="White">
        <m:Map CredentialsProvider="your key" Mode="Aerial" />
    </Grid>
</UserControl>

At once, you will see your Sign windows of Visual studio display a Bing map like the following:

BingDev08

Then, run the application in Visual Studio, you will see the Bing map in web browser.

Start to Develop Bing Map Application

Even you are an experienced Bing map developer, you still might forget how to start to develop a Bing map application after some time if you no more touch the Bing map stuff. So here we record some initial tings for Bing map development.

Microsoft Bing map developer center site: http://www.microsoft.com/maps/

BingDev00

The first step you need a Bing Map Developer Account, Click the link on home page and then access to here:  http://www.bingmapsportal.com/

BingDev01

Here you have 2 options to choose depends on whether you have a Live ID.

Since we have Live ID so we clicked Sign In button. Then we are accessed to Microsoft Live account sign in page. Just input your Hotmail or Live ID to login.

After you login by your Live ID, you will come to Bing Map account center which asks you create Bing map account:

BingDev02

You must create an account to get Bing map key or upload a Bing map apps which you created.

After you have a Bing map account, you can create a new Bing map key or view existing keys: The “Create or view keys” menu item is on the left panel, please check the following screen:

BingDev03

You can create up to 5 Bing map keys, when you create a key, you have to specify the Application Type. After you created keys, you can view them just below the Create Key block. If you need more than 5 keys, you have to contact Microsoft.

BingDev04

Only remove pushpins from a layer in Bing Map

  

     public void Clear()
        {
            List<UIElement> elementsToRemove = new List<UIElement>();
            List<UIElement> pushpinToRemove = new List<UIElement>();
            foreach (UIElement element in MyMap.Children)
            {
                if (element.GetType() == typeof(MapLayer))
                {
                    MapLayer Lay = (MapLayer)element;
                    if (Lay.Name == “PushPinLayer”)
                    {
                        foreach (UIElement p in Lay.Children)
                        {
                            if (p.GetType() == typeof(Pushpin))
                            {
                                pushpinToRemove.Add(p);
                            }
                        }
                        foreach (UIElement pin in pushpinToRemove)
                        {
                            Lay.Children.Remove(pin);

                        }
                        elementsToRemove.Add(Lay);
                    }
                }
                foreach (UIElement e in elementsToRemove)
                {
                    MyMap.Children.Remove(e);
                }
            }
        }

above code from Dinesh’s Blog

A sample: custom title source of Silverlight Bing map

In Silverlight web page:

<m:Map>
    <m:Map.Mode>
        <mCore:MercatorMode/>
    </m:Map.Mode>
    <m:Map.Children>
        <m:MapTileLayer>
                <m:MapTileLayer.TileSources>
                        <local:CustomTileSource/>
                </m:MapTileLayer.TileSources>
        </m:MapTileLayer>
    </m:Map.Children>
</m:Map>

In the code-behind .cs file:

public class CustomTileSource : TileSource
{
        public CustomTileSource()
                : base(GetAbsoluteUrl("/ClientBin/Resources/{0}.png"))
        {
        }

        public override Uri GetUri(int x, int y, int zoomLevel)
        {
                var quadKey = new QuadKey(x, y, zoomLevel);
                return new Uri(String.Format(this.UriFormat, quadKey.Key));
        }

        public static string GetAbsoluteUrl(string strRelativePath)
        {
                if (string.IsNullOrEmpty(strRelativePath))
                        return strRelativePath;

                string strFullUrl;
                if (strRelativePath.StartsWith("http:", StringComparison.OrdinalIgnoreCase)
                  || strRelativePath.StartsWith("https:", StringComparison.OrdinalIgnoreCase)
                  || strRelativePath.StartsWith("file:", StringComparison.OrdinalIgnoreCase)
                  )
                {
                        //already absolute
                        strFullUrl = strRelativePath;
                }
                else
                {
                        //relative, need to convert to absolute
                        strFullUrl = System.Windows.Application.Current.Host.Source.AbsoluteUri;
                        if (strFullUrl.IndexOf("/ClientBin") > 0)
                                strFullUrl = strFullUrl.Substring(0, strFullUrl.IndexOf("/ClientBin")) + strRelativePath;
                }
                return strFullUrl;
        }
}

The code is from here