Sample of how to use GoogleMap control

Before going further, I suppose you have installed the GoogleMap control to your web application/project.
Also make sure you have obtained a Google Maps API key for your web application.
You can do so on next url Google Maps API - Sign Up
  • Adding the control to page
You can place the control on your page as any other control, just add next like (take care prefix is same as you registered it):
<artem:GoogleMap ID="GoogleMap1" runat="server"></artem:GoogleMap>
  • Changing control width and height
By default the GoogleMap control will render out itself in 640 pixels width and 480 pixels height.
In order to change that just change/set Width and Height properties of the control.
For example to make control render out in 800/600 pixels it should looks like:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px"></artem:GoogleMap>
  • Google specific properties
    • Google Maps API key
This is most important setting of GoogleMap control to work.
Use Key property to set it up.
In order control to work you should provide here the obtained Google Maps API key and it should looks like:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab"></artem:GoogleMap>

Note: provided key in the sample above is not a real working Google Maps API key.
  • Setting Google map point
After you have provided the Google Maps API key you can set the center point of the google map frame.
To do so just set values (decimal ones) for Latitude and Longitude properties.
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
Latitude="42.1229" Longitude="24.7879">
</artem:GoogleMap>
  • Setting the map zoom
Last you can setup the initial zoom factor of the google map:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
Latitude="42.1229" Longitude="24.7879" Zoom="4">
</artem:GoogleMap>
  • Add markers to you google map
In addition to showing a location in the google map you can place one or more google map markers on a specific point with specific content.
Let's start by adding one marker to our google map:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
Latitude="42.1229" Longitude="24.7879" Zoom="4">
    <Markers>
        <artem:GoogleMarker Latitude="42.1229" Longitude="24.7879" Text="This is my first google marker here." />
    </Markers>
</artem:GoogleMap>

Going further we can add more markers and the content (Text) could be a kind of HTML markup.
Let's try that:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
Latitude="42.1229" Longitude="24.7879" Zoom="4">
    <Markers>
        <artem:GoogleMarker Latitude="42.1229" Longitude="24.7879" Text="This is my first google marker here." />
        <artem:GoogleMarker Latitude="42.7" Longitude="23.3" 
            Text="Hello, <br/> My name is Velio Ivanov and you can find more about me on:<br/><a 
             href=\'http://webutil.net\'>WebUtil.net</a>" />
    </Markers>
</artem:GoogleMap>



Have in mind you can set any property or add markers programmaticaly, as well.
For example you can add matker in a C# like:
GoogleMap1.Markers.Add(new GoogleMarker(42.1229, 24.7879, "This is my first google marker here.");


That's all for now folks.
You can take a look at a working sample of all the code above here


Happy coding ...

Any smart ideas and comments are welcome. Please do not hesitate to question me
See more about me and my works under ArtemBG | WebUtil.net

Last edited Apr 29, 2010 at 5:55 AM by velio, version 18

Comments

nirman1983 May 3, 2012 at 9:04 AM 
@t0r0 - yes, Google Maps APIv3 and afterwards do not need Application key, and so its obsolete now.
However, do you face the same issue of grey box while running it in Firefox. I think there are some issues in IE due to which I am also unable to access maps there.

t0r0 Dec 2, 2011 at 10:39 AM 
I'm confused.. there is no 'Key' property in 6.0. My googlemap control loads but it only shows a grey box with 'Google' logo on the bottom.

ikhan Jan 16, 2009 at 9:52 AM 
I have placed the map control inside web user control. The control is placed inside a DIV on the webpage. When I move DIV’s scrollbar from left to right the map image moves with the scroll. Please help.
Thanks

dziedrius Feb 20, 2008 at 5:14 PM 
is it possibile to enable mouse scroll to zoom?

saudaziz Jan 22, 2008 at 10:44 PM 
I see that we can add markers with long. and lat. specifications and associate a text with it, but there doesn't seem to be any option to Add a marker for address along with text, programmatically that is.

How can i go about doing that?