ARTICLE

Getting Start With Google Map in Windows Phone 7

Posted by Manish Singh Articles | Windows Phone February 04, 2012
This article explain how can we use Google Map in Windows Phone 7.
Reader Level:

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"

staret.gif

img2.gif

img3.gif

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

  • Drag & Drop map tools on design view.

img4.gif

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.

img5.gif

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

 <RadioButton Content="Hybrid" Height="72" HorizontalAlignment="Left" Margin="31,25,0,0" Name="radioButton1" VerticalAlignment="Top" />
 <RadioButton Content="Physical" Height="72" HorizontalAlignment="Left" Margin="254,25,0,0" Name="radioButton2" VerticalAlignment="Top" />
 <RadioButton Content="satelite" Height="72" HorizontalAlignment="Left" Margin="31,89,0,0" Name="radioButton3" VerticalAlignment="Top" IsChecked="False" />
 <RadioButton Height="72" HorizontalAlignment="Left" Margin="253,89,0,0" Name="radioButton4" VerticalAlignment="Top" Content="Street" />
 <RadioButton Content="WaterOverLay" Height="72" HorizontalAlignment="Left" Margin="31,161,0,0" Name="radioButton5" VerticalAlignment="Top" />
 <Button Content="Toogle" Height="72" HorizontalAlignment="Left" Margin="273,159,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

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">

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->


        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Google Map" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="101" />
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <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.Mode>
                    <MSPCMCore:MercatorMode/>
                </my:Map.Mode>
                <my:MapTileLayer Name="street" Margin="0,0,0,32" Height="436" Width="336">
                    <my:MapTileLayer.TileSources>
                        <GoogleTileSource:GoogleTile TileTypes="Street"/>
                    </my:MapTileLayer.TileSources>
                </my:MapTileLayer>
                <my:MapTileLayer Visibility="Collapsed"
              Name="wateroverlay" Margin="0,0,0,32">
                    <my:MapTileLayer.TileSources>
                        <GoogleTileSource:GoogleTile TileTypes="WaterOverlay"/>
                    </my:MapTileLayer.TileSources>
                </my:MapTileLayer>
                <my:MapTileLayer Visibility="Collapsed"
              Name="hybrid" Margin="0,0,0,32">
                    <my:MapTileLayer.TileSources>
                        <GoogleTileSource:GoogleTile TileTypes="Hybrid"/>
                    </my:MapTileLayer.TileSources>
                </my:MapTileLayer>
                <my:MapTileLayer Visibility="Collapsed"
              Name="satellite" Margin="0,0,0,32">
                    <my:MapTileLayer.TileSources>
                        <GoogleTileSource:GoogleTile TileTypes="Satellite"/>
                    </my:MapTileLayer.TileSources>
                </my:MapTileLayer>
                <my:MapTileLayer Visibility="Collapsed"
              Name="physical" Margin="0,0,0,32">
                    <my:MapTileLayer.TileSources>
                        <GoogleTileSource:GoogleTile TileTypes="Physical"/>
                    </my:MapTileLayer.TileSources>
                </my:MapTileLayer>
            </my:Map>
            <RadioButton Content="Hybrid" Height="72" HorizontalAlignment="Left" Margin="31,25,0,0" Name="radioButton1" VerticalAlignment="Top" />
            <RadioButton Content="Physical" Height="72" HorizontalAlignment="Left" Margin="254,25,0,0" Name="radioButton2" VerticalAlignment="Top" />
            <RadioButton Content="satelite" Height="72" HorizontalAlignment="Left" Margin="31,89,0,0" Name="radioButton3" VerticalAlignment="Top" IsChecked="False" />
            <RadioButton Height="72" HorizontalAlignment="Left" Margin="253,89,0,0" Name="radioButton4" VerticalAlignment="Top" Content="Street" />
            <RadioButton Content="WaterOverLay" Height="72" HorizontalAlignment="Left" Margin="31,161,0,0" Name="radioButton5" VerticalAlignment="Top" />
            <Button Content="Toogle" Height="72" HorizontalAlignment="Left" Margin="273,159,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
        </Grid>
       </Grid> 
</phone:PhoneApplicationPage>

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

img6.gif

In above just show simple Map to run the application.

 img7.gif

Using Zoom buttons we can increase and decrease Zoom Level.

img8.gif

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

COMMENT USING
Employers - Post Free Jobs