Google map API usage explanation (16) -- use gmapoptions to customize your Google Map

I have explained the detailed steps for creating a map before, but the core steps for creating a map are two lines of code:

VaR map = new gmap2 (document. getelementbyid ("mapcontainer "));

Map. setcenter (New glatlng (39.970981, 116.314108), 16 );

With these two lines of code, you can display your Google map on your webpage. However, this is the simplest map. If you want to make some small changes to this map to suit your appetite, you can use gmapoptions to try to customize the map.

To put it simply, gmapoptions is a gmap2 object that you can directly use the object variable form as an optional parameter to pass to the gmap2 constructor, gmapoptions has no constructor itself (the optional parameters of class constructor in map API are defined in this form), for example:

VaR Options = {size: gsize (400,300), backgroundcolor: "# ff0000 "};

VaR map = new gmap2 (document. getelementbyid ("mapcontainer"), options );

Here options is a gmapoptions, and size and backgroundcolor are their options.

In gmapoptions, we can define the following attributes to specify certain map features:

1) Size

By default, the size of the map you create is the size of the map container you specify. Therefore, generally, you need to explicitly declare the width and height attributes of your map container, otherwise, the map cannot be displayed normally. However, with the optional attribute "size", you have an additional choice. You can use the size attribute to specify the map size when creating a map, instead of waiting for the map container, even if the map container has defined the size of width and height. Of course, the value of the size attribute is a gsize data type. For example, if you specify Options = {size: gsize (400,
300)}, then, the size of the map you created is a rectangle block of 400 × 300, regardless of the container size you specified, however, the upper left corner of the map overlaps with the upper left corner of the map container.

2) maptypes

After creating a map, the default map type is normal. To add other types of maps, such as satellite maps and terrain maps, you can use the gmap2.setmaptype () method, however, this will often list a bunch of setmaptypes. Gmapoptions provides the maptypes option. You can add multiple supported types to the map through an array, such

{Maptypes: [g_normal_map, g_satellite_map, g_physical_map]}. Your map has three types: Common, satellite, and terrain. The first item in the maptypes array is the default map loading type. Therefore, if you want to load a satellite map by default, move g_satellite_map to the first item in the array.

3) draggablecursor and draggingcursor

These two options are used to define your cursor type on the map. The introduction that I put them together does not mean they must be used together. You can use either of them. Draggablecursor is the cursor in the drag-and-drop state of a map (by default, it can be dragged), while draggingcursor is the cursor when the map is dragged, the corresponding value is the same as the value used when you set other optical labels in Javascript, for example, {draggablecursor: "crosshair", draggingcursor: "move "}. Of course, you can also add your own icon in the URL format to see if you have used it!

4) backgroundcolor

Before the map block image is transmitted, the display area of the map is dimmed by default. This is where backgroundcolor can be used, you can change the gray color to any other W3C-compliant color, for example, {backgroundcolor: "# ff0000 "}.

5) googlebaroptions

This is related to your use of gmap2.enablegooglebar () on the map. It specifies some default attributes when you add googlebar. The customization is strong.