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