Getting Start With Google Map in Windows Phone 7

Manish Singh
Feb 05, 2012
32.2k
0
2
Article

Introduction

In this article we are going to discuss how to use Google map with Windows Phone 7. Further in details we will see how it is possible to do that with Windows Phone 7. As much we know that Bing map is being launched by Microsoft Corporation and later so we can use Bing maps; simply drag and drop the map control in Silverlight applications. I will explain how can we use Google maps in Microsoft Map control. In comparison with Google map it has less data and has less depth. So to do this you have to follow the steps given below.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select the Silverlight for Windows Phone application
Name the project
Now name of project is "GooglemapTest"

Step 2 : Open the Toolbox of the Windows Phone application.

Drag & Drop map tools on design view.

Step 3 : For using Maps on Windows 7 Phone application you must have a credential key. The following are the steps to create a credential key:

First create an account on HotMail
After that register this site: link
Finally generate your credential key
just like a : "ApXjYPChA-MW0fszWs_Djhgsfdjhdfhdf-Ov1zjkhjk_1Bm--hj9I56Qr9UuLAa".

Copy the credential key from there and just paste it onto the credential Provider property of the Map control in XAML page.

Step 4 : Set some formatting on the Map control tag in the xaml page.

Code

<my:Map Height="362" HorizontalAlignment="Left" Margin="12,239,0,0" Name="googlemap"
CredentialsProvider="AqayajnZU8FSfDGL8jpK5zMKAHmUL27Uqxv_OnpQzJQOI2PoQyxcG7dlR6_g4WWo"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed"
ScaleVisibility="Visible" VerticalAlignment="Top" Width="418" >
</my:Map>

Step 5 : Drag and drop four radio buttons and one button from the Toolbox to the design view. Each radio button represents different modes of maps.

Code

Step 6 : First we need to import two namespaces on the XAML page to access the feature of GoogleTileSource.

Code

xmlns:GoogleTileSource="clr-namespace:GooglemapTest
xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"

Step 7 : Now, the final source code of the XAML page is given below:

Code

<phone:PhoneApplicationPage
   x:Class="GooglemapTest.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:GoogleTileSource="clr-namespace:GooglemapTest"

   xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">

Step 8 : the Map control uses a Uri GetUri(int x, int y, int zoomLevel) method which returns a Uri which contains the image of the tile to be displayed. A tile is an image of 256x256 defined by its X and Y position in the grid forming the map of the world on a specific zoom level. So first we create a class that inherits from Microsoft.Phone.Controls.Maps.TileSource that contains a overridden method Uri GetUri(int x, int y, int zoomlevel).

Code

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;

using System.Windows.Shapes;
namespace GooglemapTest
{
    public class GoogleTile : Microsoft.Phone.Controls.Maps.TileSource
    {
        private int _server;
        private char _mapmode;
        private GoogleTileTypes _tiletypes;
        public GoogleTileTypes TileTypes
        {
            get { return _tiletypes; }
            set
            {
                _tiletypes = value;
                MapMode = MapModeConverter(value);
            }
        }
        public char MapMode
        {
            get { return _mapmode; }
            set { _mapmode = value; }
        }
        public int Server
        {
            get { return _server; }
            set { _server = value; }
        }

        public GoogleTile()
        {
            UriFormat = @"http://mt%7B0%7D.google.com/vt/lyrs=%7B1%7D&z=%7B2%7D&x=%7B3%7D&y=%7B4%7D";
            Server = 0;
        }

        public override Uri GetUri(int x, int y, int zoomLevel)
        {
            if (zoomLevel > 0)
            {
                var Url = string.Format(UriFormat, Server, MapMode, zoomLevel, x, y);
                return new Uri(Url);
            }
            return null;
        }

        private char MapModeConverter(GoogleTileTypes tiletype)
        {
            switch (tiletype)
            {
                case GoogleTileTypes.Hybrid:
                    {
                        return 'y';
                    }
                case GoogleTileTypes.Physical:
                    {
                        return 't';
                    }
                case GoogleTileTypes.Satellite:
                    {
                        return 's';
                    }
                case GoogleTileTypes.Street:
                    {
                        return 'm';
                    }
                case GoogleTileTypes.WaterOverlay:
                    {
                        return 'r';
                    }
            }
            return ' ';
        }
        public enum GoogleTileTypes
        {
            Hybrid,
            Physical,
            Street,
            Satellite,
            WaterOverlay
        }
    }
}

Step 9 : Now we will create code for Toggle Button OnClick event for toggling the mode of maps on CS file of XAML page.

There is given below the whole source code of mainpage.xaml.cs file.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps.Core;

namespace GooglemapTest
{
    public partial class MainPage : PhoneApplicationPage
    {
        GoogleTile gt;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            gt = new GoogleTile();
            googlemap.ZoomBarVisibility = System.Windows.Visibility.Visible;
        }
        private void ButtonZoomIn_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            googlemap.ZoomLevel++;
        }
        private void ButtonZoomOut_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            googlemap.ZoomLevel--;
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (radioButton1.IsChecked == true)
            {
                hybrid.Visibility = Visibility.Visible;
                satellite.Visibility = Visibility.Collapsed;
                street.Visibility = Visibility.Collapsed;
                physical.Visibility = Visibility.Collapsed;
                wateroverlay.Visibility = Visibility.Collapsed;
            }
            else if (radioButton4.IsChecked == true)
            {
                hybrid.Visibility = Visibility.Collapsed;
                satellite.Visibility = Visibility.Collapsed;
                street.Visibility = Visibility.Visible;
                physical.Visibility = Visibility.Collapsed;
                wateroverlay.Visibility = Visibility.Collapsed;
            }
            else if (radioButton3.IsChecked == true)
            {
                hybrid.Visibility = Visibility.Collapsed;
                satellite.Visibility = Visibility.Visible;
                street.Visibility = Visibility.Collapsed;
                physical.Visibility = Visibility.Collapsed;
                wateroverlay.Visibility = Visibility.Collapsed;
            }
            else if (radioButton2.IsChecked == true)
            {
                hybrid.Visibility = Visibility.Collapsed;
                satellite.Visibility = Visibility.Collapsed;
                street.Visibility = Visibility.Collapsed;
                physical.Visibility = Visibility.Visible;
                wateroverlay.Visibility = Visibility.Collapsed;
            }
            else
            {
                hybrid.Visibility = Visibility.Collapsed;
                satellite.Visibility = Visibility.Collapsed;
                street.Visibility = Visibility.Collapsed;
                physical.Visibility = Visibility.Collapsed;
                wateroverlay.Visibility = Visibility.Visible;
           }
        }
    }
}

Output

In above just show simple Map to run the application.

Using Zoom buttons we can increase and decrease Zoom Level.

Select radio button satellite and click toggle button; we can open a map in satellite mode, similarly select different -2 mode from radio button and open Map in different-2 mode.

Here are some other resources which may help you.

Using Google Map in an ASP.NET MVC Application
The installed battery may not be properly connected to the computer
Getting URL of current page in Windows Phone dynamically through code
Google map in SharePoint 2010 content editor web part