Common usage 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 Jan 26, 2008 at 3:34 PM by velio, version 1

Comments

sundhark Oct 29, 2008 at 7:07 AM 
Hello,

How can I make the location (marker) to center of the map?

I tried the following , it did not work

GoogleMap1.Markers[0].Address = "chandler, az, usa";

GoogleMap1.Latitude = 33.4979;
GoogleMap1.Longitude = -112.081;

GoogleLocation location = new GoogleLocation();
location.Latitude = GoogleMap1.Markers[0].Latitude;
location.Longitude = GoogleMap1.Markers[0].Longitude;
GoogleMap1.PanTo(location);

any of you have sample code ?

Thanks