My readers keep on asking me that how do we get Google / Bing location map after we typed the location in text format. This is very basic tutorial explained how to share location Map using Google Static Map API.
Just one line of code will turn your web application more beautiful 🙂
The Google Static Maps API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page.
The following example contains the URL of a static map image of Chennai, India. which is displayed below:
https://maps.googleapis.com/maps/api/staticmap?center=chennai
&zoom=13
&size=600x150
&maptype=roadmap
&markers=color:red%7Cchennai
&sensor=false
&scale=2
Notice that you don’t need to do anything “special” to get this image to show up on the page. No JavaScript is required. All we needed to do was create a URL, and place it within an <img> tag. You can place a Google static map anywhere on your webpage where you can place an image
Live Example
The Google Static Maps API returns an image (either GIF, PNG or JPEG) in response to an HTTP request via a URL. For each request, you can specify the location of the map, the size of the image, the zoom level, the type of map, and the placement of optional markers at locations on the map. You can additionally label your markers using alphanumeric characters.
Important: The discussion of URL parameters below use examples that for clarity are given in their pre-escaping form. Before sending any request to the API, its parameters should be properly URL encoded. For example, many parameters use a pipe character (|) as a separator, which should be encoded as %7C in the final URL, as in the quick example at the top of this document.
The Static Maps API defines map images using the following URL parameters:
Contents
Location Parameters
- center (required if markers not present) defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either a comma-separated {latitude,longitude} pair (e.g. “40.714728,-73.998672”) or a string address (e.g. “city hall, new york, ny”) identifying a unique location on the face of the earth
- zoom (required if markers not present) defines the zoom level of the map, which determines the magnification level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired.
Map Parameters
- size (required) defines the rectangular dimensions of the map image. This parameter takes a string of the form {horizontal_value}x{vertical_value}. For example, 500×400 defines a map 500 pixels wide by 400 pixels high. Maps smaller than 180 pixels in width will display a reduced-size Google logo. This parameter is affected by the scale parameter, described below; the final output size is the product of the size and scale values.
- visual_refresh (optional) when true, applies the latest Google Maps look to your image. This will change the base map tiles, and markers.
- scale (optional) affects the number of pixels that are returned. scale=2 returns twice as many pixels as scale=1 while retaining the same coverage area and level of detail (i.e. the contents of the map don’t change). This is useful when developing for high-resolution displays, or when generating a map for printing. The default value is 1. Accepted values are 2 and 4 (4 is only available to Maps API for Business customers.) See Scale Values for more information.
- format (optional) defines the format of the resulting image. By default, the Static Maps API creates PNG images. There are several possible formats including GIF, JPEG and PNG types. Which format you use depends on how you intend to present the image. JPEG typically provides greater compression, while GIF and PNG provide greater detail. For more information, see Image Formats.
- maptype (optional) defines the type of map to construct. There are several possible maptype values, including roadmap, satellite, hybrid, and terrain. For more information, see Static Maps API Maptypes below.
- language (optional) defines the language to use for display of labels on map tiles. Note that this parameter is only supported for some country tiles; if the specific language requested is not supported for the tile set, then the default language for that tileset will be used.
- region (optional) defines the appropriate borders to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD (‘top-level domain’) value.
Feature Parameters
- markers (optional) define one or more markers to attach to the image at specified locations. This parameter takes a single marker definition with parameters separated by the pipe character (|). Multiple markers may be placed within the same markers parameter as long as they exhibit the same style; you may add additional markers of differing styles by adding additional markers parameters. Note that if you supply markers for a map, you do not need to specify the (normally required) center and zoomparameters. For more information, see Static Map Markers below.
- path (optional) defines a single path of two or more connected points to overlay on the image at specified locations. This parameter takes a string of point definitions separated by the pipe character (|). You may supply additional paths by adding additional path parameters. Note that if you supply a path for a map, you do not need to specify the (normally required) center and zoom parameters. For more information, see Static Map Paths below.
- visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the static map.
- style (optional) defines a custom style to alter the presentation of a specific feature (road, park, etc.) of the map. This parameter takes feature and element arguments identifying the features to select and a set of style operations to apply to that selection. You may supply multiple styles by adding additional style parameters. For more information, see Styled Maps below.
Reporting Parameters
- sensor (required) specifies whether the application requesting the static map is using a sensor to determine the user’s location. This parameter is required for all static map requests
Source – https://developers.google.com/maps/documentation/staticmaps/
Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedback are all welcome!
Thanks!
nice script