Call Gmaps to display the corresponding Google map based on the address (hide and change the control)

Source: Internet
Author: User

We may use the display map when creating a web page, and use Gmaps a few days ago to summarize some of the controls.

Sometimes the map we need to display may be very small, and some default display controls on Google map affect the Map Display and appearance, to achieve this effect, you need to hide and change the control to make the displayed image, as shown in


Main controls in the MAP:

Reference file address: https://developers.google.com/maps/documentation/javascript/controls? Hl = ZH-CN # adding_controls_to_the_map


Default control set

Google Maps API provides the following default controls:

Widget Large Screen Small Screen IPhone Android
Zoom Large zoom control, applicable to screens with 400x350 pixels or more Small zoom control for screens below 400x350 pixels Not displayed. Scaling is achieved through the opening and closing operation of two fingers. "Touch" controls
Translation Screen Display of 400x350 pixels or more The screen below 400x350 pixels is not displayed Not displayed. Translation is implemented through touch. Not displayed. Translation is implemented through touch.
Maptype Horizontal Bar, applicable to screens with a width of more than 320 pixels Drop-down menu, applicable to screens with a width below 320 pixels Same as large screen/Small Screen Same as large screen/Small Screen
Proportion Does not exist Does not exist Does not exist Does not exist

1. pancontrol: enables/disables the pan control. By default, this control is displayed in the upper left corner of the map. Type: Boolean, shape

2. scalecontrol: Enables or disables the scale control, which provides a simple map scale. This control is not displayed by default. When enabled, it is displayed in the lower left corner of the map. Type: Boolean, shape

3. maptypecontrol:

You can enable or disable the map type control, which allows you to switch between map types (such as map and satellite. By default, this control is displayed in the upper-right corner of the map. Type: Boolean, shape


Maptype ControlCan be displayed as followsstyleOption:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BARTo display a group of controls as shown in Google maps in the horizontal bar.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENUTo display a single button control, so that you can select a map type from the drop-down menu.
  • google.maps.MapTypeControlStyle.DEFAULTIs used to display the "default" behavior, which depends on the screen size and may be changed in future API versions.

4. zoomcontrol:

Enables or disables the zoom control. By default, this control is displayed in the upper left corner of the map. Type: booean


Zoom ControlIt may appear in one of the followingstyleOption:

  • google.maps.ZoomControlStyle.SMALLUsed to display the mini zoom control, which is limited+And-Button. This style applies to small maps. On the touch device, the control is displayed as+And-Button.
  • google.maps.ZoomControlStyle.LARGEDisplays the standard zoom slider control. On the touch device, the control is displayed as+And-Button.
  • google.maps.ZoomControlStyle.DEFAULTSelect the appropriate scaling Control Based on the map size and the device that runs the map.
The code of the above map in JSP is: (the runtime environment is myeclipse Tomcat)
<% @ Page Language = "Java" Import = "Java. util. *" pageencoding = "UTF-8" %> <! Doctype HTML> 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.