Click here to Skip to main content
15,885,546 members
Articles / Mobile Apps / Windows Phone 7

Google Maps for Windows Phone 7 using Bing Map Control

Rate me:
Please Sign up or sign in to vote.
4.74/5 (52 votes)
3 Feb 2011CPOL3 min read 173K   6.1K   46  
This article covers the way we could use Google Map using the Map Control shipped by Microsoft with Windows Phone 7 Developer Tools
<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:GoogleTileSource="clr-namespace:googlemaps;assembly=googlemaps"
    xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Microsoft_Phone_Controls_Maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps" 
    x:Class="googlemaps.MainPage"
    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">
	<phone:PhoneApplicationPage.Resources>

		<Style x:Key="ButtonZoomInStyle" TargetType="Button">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid Background="Transparent" Width="48" Height="48">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Collapsed</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused"/>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Center" VerticalAlignment="Center">
									<Grid Height="48" Width="48" HorizontalAlignment="Center" VerticalAlignment="Center">
										<Image x:Name="image" Source="ZoomIn_Black.png" Stretch="Fill" Visibility="Collapsed"/>
										<Image x:Name="image1" Source="ZoomIn_White.png" Stretch="Fill"/>
									</Grid>
								</ContentControl>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style x:Key="ButtonZoomOutStyle" TargetType="Button">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid Background="Transparent" Width="48" Height="48">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Collapsed</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image1" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused"/>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Center" VerticalAlignment="Center">
									<Grid Height="48" Width="48" HorizontalAlignment="Center" VerticalAlignment="Center">
										<Image x:Name="image1" Source="ZoomOut_White.png" Stretch="Fill"/>
										<Image x:Name="image" Source="ZoomOut_Black.png" Stretch="Fill" Visibility="Collapsed"/>
									</Grid>
								</ContentControl>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

	</phone:PhoneApplicationPage.Resources>

    <!--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="MAESTRO" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="google maps" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        	<Grid>
        		<Button Content="toggle mode" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,76,0,0" Width="202" Height="76" Click="Button_Click" />
        		<RadioButton Name="h" Content="hybrid" Height="76" VerticalAlignment="Top" HorizontalAlignment="Left" Width="130" Margin="-6,0,0,0"/>
                <RadioButton x:Name="p" Content="physical" Height="76" VerticalAlignment="Top" Margin="114,0,194,0"/>
        		<RadioButton x:Name="w" Content="water overlay" Height="76" VerticalAlignment="Top" HorizontalAlignment="Right" Width="202"/>
        		<RadioButton x:Name="st" Content="street" Height="76" VerticalAlignment="Top" HorizontalAlignment="Left" Width="130" Margin="-6,76,0,0"/>
        		<RadioButton x:Name="sl" Content="satellite" Height="76" VerticalAlignment="Top" Margin="114,76,194,0"/>
                <Microsoft_Phone_Controls_Maps:Map Name="googlemap" Margin="0,161,0,0" CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Visible" CredentialsProvider="ApBXPZf5IR94SLXE8nh5FYsb5WHKrH1XPY7428-EqQudseivcWhCROIJvGmtnkAV">
                    <Microsoft_Phone_Controls_Maps:Map.Mode>
                        <MSPCMCore:MercatorMode/>
                    </Microsoft_Phone_Controls_Maps:Map.Mode>
                    <Microsoft_Phone_Controls_Maps:MapTileLayer Name="street" Margin="0,0,0,32">
                        <Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                            <GoogleTileSource:GoogleTile TileTypes="Street"/>
                        </Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                    </Microsoft_Phone_Controls_Maps:MapTileLayer>
                    <Microsoft_Phone_Controls_Maps:MapTileLayer Visibility="Collapsed" Name="wateroverlay" Margin="0,0,0,32">
                        <Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                            <GoogleTileSource:GoogleTile TileTypes="WaterOverlay"/>
                        </Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                    </Microsoft_Phone_Controls_Maps:MapTileLayer>
                    <Microsoft_Phone_Controls_Maps:MapTileLayer Visibility="Collapsed" Name="hybrid" Margin="0,0,0,32">
                        <Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                            <GoogleTileSource:GoogleTile TileTypes="Hybrid"/>
                        </Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                    </Microsoft_Phone_Controls_Maps:MapTileLayer>
                    <Microsoft_Phone_Controls_Maps:MapTileLayer Visibility="Collapsed" Name="satellite" Margin="0,0,0,32">
                        <Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                            <GoogleTileSource:GoogleTile TileTypes="Satellite"/>
                        </Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                    </Microsoft_Phone_Controls_Maps:MapTileLayer>
                    <Microsoft_Phone_Controls_Maps:MapTileLayer Visibility="Collapsed" Name="physical" Margin="0,0,0,32">
                        <Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                            <GoogleTileSource:GoogleTile TileTypes="Physical"/>
                        </Microsoft_Phone_Controls_Maps:MapTileLayer.TileSources>
                    </Microsoft_Phone_Controls_Maps:MapTileLayer>
                </Microsoft_Phone_Controls_Maps:Map>
                <StackPanel HorizontalAlignment="Left" Margin="8,0,0,153" Orientation="Vertical" Width="56" VerticalAlignment="Bottom">
                	<Button x:Name="ButtonZoomIn"
                		Style="{StaticResource ButtonZoomInStyle}"
                		RenderTransformOrigin="0.429,-0.679" Click="ButtonZoomIn_Click" Height="82" />
                	<Button x:Name="ButtonZoomOut"
                		Style="{StaticResource ButtonZoomOutStyle}"
                		VerticalAlignment="Top"
                		Height="56" Click="ButtonZoomOut_Click" />
                </StackPanel>
        	</Grid></Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Student Unikrew Solutions
Pakistan Pakistan
A student of Computer Sciences at NUCES-FAST karachi, Pakistan.

Having interst in mostly Microsoft related tools and technologies like :

.Net Framework
Expresison Blend
Windows Phone 7
SQL Server
Asp.net
WPF
Silverlight

Comments and Discussions