Before you can start to use this guide you need to at least download the trial version of Google Maps Control. The trial version doesn't expire but it does place a random marker on the map to remind you that it is only a trial version and not intended for production environments.

If you have not downloaded the trial version please do so now. Download Google Maps Control

After the download is complete unzip the archive that was downloaded and run the Setup.exe file by double clicking on it. Follow the prompts so that the dll and the license agreement are installed in the directory of your choosing.

By default Google Maps Control is installed in C:\Program Files\E3 Software Solutions\Google Maps Control\ and the Bin subdirectory contains the DLL that will need to be referenced by your web site. If you are working on a project with more than one developer adding a reference to the DLL in this location is safe as long as all of the other developers install the Google Maps Control into the same location. Remember that the Google Maps Control is licensed per company so share the installer with any developer in your company that needs to use it.

Before you can actually see your maps on your web pages you need to visit the Google Maps API web site and get a license key. Please understand that Google Maps Control is not produced or licensed by Google and the use of Google Maps Control does not constitute a license to use Google Maps API. You must read and accept the license agreement from Google before you can get a Google Maps API Key.

If you are using the built in development server you will need to include the port number that is being used when you request your Google Maps API key. If you are working with other developers on the same project it is recommended that you go into the web project properties and make the port number static so that each developer doesn't need to get his or her own Google API Key. You will need additional Google Maps API Keys for each environment that you are going to deploy your project into basically ever tying the URL changes you need another key.

In order to make the Google Maps Control as easy to use as possible we have included a configuration section that can be added to your web.config file using the code below. The Google Maps Control looks for this configuration section if the ApiKey attribute is missing from the GMap tag. Release the text --api--key--goes--here-- with the Google Maps Api key you got from the Google Maps API web site.

<configSections>
    <section name="googleMaps" type="GoogleMaps.Configuration.GoogleMapsSection, GoogleMaps"/>
</configSections>

<googleMaps apiKey="--api--key--goes--here--"/>

If you would prefer to not use the configuration section then you can add the api key to the appsettings section of the web.config file but then you will have to reference the api key in each instance of the Google Maps Control. Below is a short example of how to setup the appsettings and then reference it.

// web.config
<appSettings>
    <add key="ApiKey" value="--api--key--goes--here--"/>
</appSettings>

// asp.net web page
<gm:GMap ID="GMap1" runat="server" Width="500px" Height="300px" 
    ApiKey="<%$ AppSettings:ApiKey %>" />

Now that you have made a reference to the Google Maps Control and added the necessary settings to your web.config you are ready to start adding some maps.

This is about as simple as we could have ever made it. You only need the one liner documented here to get a map shown on the screen. If you are not using the GoogleMaps configuraiton section you will need to add the ApiKey attribute to all of the examples you find on this site.

<gm:GMap ID="GMap1" runat="server" Width="500px" Height="300px" />

This little bit of code will add a map of the United States to your website that is contained in a div tag 500px wide and 300px tall.

Building on Step 7 we will add a single marker to the map using a declarative approach. You can find examples of how to use databinding in the examples area of this site. (Example 1, Example 2, Example 3)

<gm:GMap ID="GMap1" runat="server" Width="500px" Height="300px">
    <GMarkers>
        <gm:GMarker Lat="38.4419" Lng="-122.1419" />
    </GMarkers>
</gm:GMap>

Events can be added to maps, markers, polygons and polylines. Building on Step 7 we will add an event to the marker that we created.

<gm:GMap ID="GMap1" runat="server" Width="500px" Height="300px">
    <GMarkers>
        <gm:GMarker Lat="38.4419" Lng="-122.1419" Id="marker1">
            <GEvents>
                <gm:GEvent EventName="click">alert("Marker 1 clicked.");</gm:GEvent>
            </GEvents>
        </gm:GMarker>
    </GMarkers>
</gm:GMap>

Please make a special note that the Id attribute was added to the marker so that the event can be added to it. Id is a required field when events are wired up to the marker. The contents of the GEvent tag contain the contents of the JavaScript function that will be generated by the Google Maps Control.

You now have a great start on how to use the Google Maps Control but you can find a lot more information on the Google Maps Control by looking at the Examples area of this site. You can also find a lot of examples and by looking at the Google Maps Api web site.