In this article, we will develop an Android application that stores user touched locations of Google Maps in a remote MySQL server. Since this application is. Here's a simple example of creating a custom overlay class for Google Maps API v3. This Label overlay can either be used on its own, or bound to a marker.
Building a Store Locator ASP. NET Application Using Google Maps API (Part 2).
By Scott Mitchell. Introduction. Last week's article, Building a Store Locator ASP. NET Application Using Google Maps API (Part 1), was the. ASP. NET website using the free Google.
You're using lat and lng for the marker position before they're initialized (unless they're globally set somewhere): var newLatLng = new google.maps.LatLng(lat, lng. Building a Store Locator ASP.NET Application Using Google Maps API (Part 2) By Scott Mitchell.
V2 v3; GMap2: google.maps.Map: GLatLng: google.maps.LatLng: GInfoWindow: google.maps.InfoWindow: GMapOptions: google.map.MapOptions: G_API_VERSION: google.
Maps API. Part 1 started with an examination of the database used to power the store locator, which contains a single table named Stores with columns capturing. Next, we looked at using Google Maps API's geocoding service to translate a user- entered address, such as. San Diego, CA or 9. Knowing the coordinates of the address entered by the user, we then looked at writing a SQL. These nearby stores were then displayed in a grid, listing the store number, the. While a list of nearby stores and their distances certainly qualifies as a store locator, most store locators also include a map showing the area searched, with markers.
This article looks at how to use the Google Maps API, a sprinkle of Java. Script, and a pinch of server- side code to add such functionality to. Read on to learn more! Displaying a Map in a Web Page Using Google Maps API. The Google Maps API is a free and easy to use API for displaying interactive maps on a web page using a bit of client- side Java. Script. To use the Google Maps API from a web. API via a < script> element like so.
This < script> element needs to appear on every page that uses the Google Maps API. You can add it on a page- by- page basis or in the master page. Once the. API has been referenced, you can use it in your client- side Java. Script. The API offers a host of classes, each with a slew of properties, methods, and events. The. Google Maps Java.
Script API Reference lists these classes and their members and is an. Google Maps API. To display a map in a web page you need to create the map canvas, which is the area on the web page where the map will be "painted." The map canvas is simply an HTML. The id attribute identifies the < div> element and will be used to reference the element by the Java. Script that displays the map. The style. attribute specifies the dimensions of the map - in this case the map will be 5. You could also use relative measurements (like a width of 1.
With the Google Maps API referenced via a < script> element and with the map canvas in place, all that remains is to write the Java. Script to display the. To display a map we use the Map class and need to pass in three bits of information. The latitude and longitude coordinates of where to center the map,The zoom level, and.
The map type. The latitude and longitude coordinates are specified via a Lat. Lng object. The zoom is an integer value that ranges from zero on up. A zoom level of zero shows the entire. All points on the map can zoom up to 1. The map type indicates whether the map shows just. The following markup and Java. Script displays a hybrid map of Mexico City, Mexico.
Mexico City, Mexico< /title> < script type="text/javascript" src="http: //maps. Level) {var my. Lat. Lng = new google. Lat. Lng(lat, lng); var options = {zoom: zoom.
Level,center: my. Lat. Lng,map. Type. Id: google. maps. Map. Type. Id. HYBRID}; var map_canvas = document.
Element. By. Id(map_canvas_id); var map = new google. Map(map_canvas, options); }< /script> < /head> < body> < h. Mexico City, Mexico< /h. You are viewing a hybrid map of Mexico City!< /p> < script type="text/javascript"> init_map('my_map', 1.
First, note the map canvas (my_map), which defines a canvas of 4. There's also some other HTML markup on the page - an < h. In the < head> section there are two < script> tags.
The first one pulls in the Google Maps API while the second one defines a function. The init_map function accepts four input parameters. Level - the zoom level. The init_map function starts by creating a Lat.
Lng object modeling the lat and lng values passed into the function. Next, an options object is defined as having three properties - zoom, center, and map. Type. Id - and these properties are set. Level), the Lat. Lng object based on the passed- in lat and lng values (my.
Lat. Lng), and. the Map. Type. Id value HYBRID, which indicates that the a hybrid map should be displayed (one that shows both road and satellite information). Next, the map canvas is retrieved from the HTML DOM via the get.
Element. By. Id function. Finally, a new Map object is created by passing in the map canvas and the. That's all there is to it! When viewing the page through a browser you will see a 4. Mexico City, Mexico. Like with any other Google map, the visitor can zoom in and zoom out and scroll the map by clicking and dragging her mouse on the map surface. The final piece of the puzzle is the < script> block at the end of the HTML document.
Here we call the init_map function passing in the id. The screen shot below shows this sample page when initially viewed through a browser. Adding Markers to the Map. At this point we have seen how to use the Google Maps API to display a map centered at a specific latitude and longitude location. While this is certainly useful in many scenarios. The good news is that with a bit more Java.
Script we. can add markers to the map. The Google Maps API includes a Marker class that can be placed at a specific latitude and longitude. To add a marker to a map first create. Map object (like we did in the sample above) and then use the following pattern.
Marker({ title: "Marker Title", position: new google. Lat. Lng(lat, lng) }); marker. Map(map. Object). Marker Title is the title of the marker and appears as a tooltip when the user hovers over the marker; lat and lng indicate the latitude and. To demonstrate using markers, let's create another Mexico City map that includes markers showing museums of interest.
I found a bunch of Mexico City museums listed online. I then used the. Google geocoding service discussed last week to translate those addresses to latitude and longitude coordinates. I then combined this into an array of title and. Java. Script. var markers =[{title: "National Art Museum",position: new google.
Lat. Lng(1. 9. 4. Viceroyal Painting Gallery",position: new google.
Lat. Lng(1. 9. 4. Carmelitan Museum",position: new google. Lat. Lng(1. 9. 3. San Carlos Museum",position: new google. Lat. Lng(1. 9. 3. Next, I added the following code to the init_map function, which we created in the previous example.
I also changed the map's Map. Type. Id value from.
HYBRID to ROADMAP.). Level) {.. var map = new google. Map(map_canvas, options); // Place markersfor (var i = 0; i < markers. Marker(markers[i]); marker. Map(map); }}. The above code adds the four markers defined in the markers array to the map.
However, if you view the page through a browser you'll see that not all markers. The map is centered in the heart of Mexico City at a zoom level that only captures two of the four markers (see the screen shot below). If you zoom. out you'll soon see the other two markers, which are in the southwest part of the city. The Google Maps API includes a Lat.
Lng. Bounds object that can be used to define a boundary that includes all of the markers added to the map; moreover, this boundary. To use this object, we need to update the init_map function to. Lat. Lng. Bounds object, to extend it with each new marker, and then to set the map's center and zoom level based on the bounds.
The following code. Level) {.. var map = new google. Map(map_canvas, options); var bounds = new google.
Lat. Lng. Bounds(); // Place markersfor (var i = 0; i < markers. Marker(markers[i]); marker. Map(map); bounds. Position()); } // Center/zoom the map based on the boundsmap. Bounds(bounds); map. Center(bounds. get. Center()); }. With the above code in place, the initial map view is appropriately centered and zoomed, as the following screen shot illustrates.
Tying It All Together - Displaying a Map and Markers for the Store Locator. Now that we know how to display a map and add markers to it, we're ready to update our store locator results page to show a map based on the address entered by the user and to. Recall that the search results are displayed in the Show.
Store. Locations. Google's geocoding service to translate the user- entered address into latitude and longitude coordinates.
In Part 1 we used these coordinates to determine which store locations. We'll use these same coordinates as the initial center for our map.
Before we get there, though, let's first take a look at the HTML we need to add to the Show. Store. Locations. There are three. important pieces. A < script> tag that references the Google Maps APIA < script> tag referencing the script file Google. Helpers. js. This is a script file in the Scripts folder that contains the init_map. The init_map function in Google. Helpers. js is virtually identical to the one we examined in the Adding Markers to the Map section.
The only difference is that instead of having a markers array defined external to the function the markers array is passed into the function as an input. A map canvas implemented as a < div> element named map_canvas.
The map canvas appears above the grid of nearby store locations. The heavy lifting happens in the Page_Load event in the code- behind class. Here, the nearby store locations are retrieved and enumerated.
For each nearby store. Java. Script is created, defining an object with title and position properties. The title property displays the store. Lat. Lng object modeling the latitude and longitude values of the store. These objects. are combined into an array and then passed into the init_map function. The following C# code shows the above workflow. The demo available for download at the end of this article include code in both C# and VB, so if you want to see the VB equivalent.
A couple of comments about the code: first, recall that the nearby store locations are pulled from the database using a Sql. Data. Source control. Search. Results) that is bound to a List. View control on the page.