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
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.
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>
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
hereHappy coding ...Any smart ideas and comments are welcome.
Please do not hesitate to question meSee more about me and my works under
ArtemBG |
WebUtil.net