![]() ![]() After many trial and errors, we found a super gmap extension library which we loaded for our project.Īt this point of the process, our client asked whether locations can be categorized by different coloured icons, (since their work too is categorized by certain viewpoints). Due to this lack of visibility, we had to find a more effective solution for displaying labels. We didn’t want to use fontweight nor fontfamily for this project.Īs you can see in the map above, the inscriptions are not clearly visible, particularly if they are overlapping each other. the label in bold font), and fontFamily, (custom font families can be used). Besides these, the label has additional options such as fontWeight, (i.e. The fontSize determines the size of our label in pixels. The color parameter defines the color of the text. The text parameter of the label property contains the printed label. After using this parameter, the image shown at the size we have defined, may be distorted. ScaledSize is the actual size of our icon. However, due to its size, it will reposition the icon. If using a sprite image, the size parameter is required. (This only makes sense if you are using an image from sprite image). The Origin appears in the icon’s position within the image as an offset. on x:120 value the image will move left by 120px) The values are corresponding to the location of the marker, (i.e. The Anchor is the icon that can be repositioned from its center. The additional, currently unused parameter options of icon are as follows: We can either use the x and y values as mentioned above or use a new (12,-10) definition without using object. The label will be positioned along the x and y coordinate axis. Thanks to the labelOrigin, we can reposition our label according to the top-left corner of a loaded image. The url parameter obtains the URL of the icon. Var bp = ,Īs seen in the code above, the icon received an object with two values, ( url and labelOrigin), instead of a plain URL. Since June 2018, we set up a valid billing account via Google Cloud platform Console in order to use Google MAP API. centre, zoom, etc), we must create an initialized script. The next steps are to define a div element named “map” as well as defining the CSS rule for this map by setting the dimensions. The starter code of the map is very simple: we need a map API js script calling which contains your individual API KEY in the head of HTML. The extra feature of this task was to use individual icons and labels for marker points. You can create a Google Map integration quickly and easily by using the Google Map developer documentation as well as countless other tutorials. We’d like to help those whom want to use similar solution. But those suggestions weren’t quite detailed and well-documentated than this blogpost wants to be. Although the Google Map developer documentation is very useful we had to read many forums and other blogs where we found the desired solution. Unfortunately we didn’t find detailed and proper documentation to achieve our goal. The goal of this blogpost was to present the evolution of a task like we described above. ![]() We used Google Maps API to create an image in document. It was clear that we had to provide a dynamic solution. During data collection, we were unsure as to which datasets would be included in the finalized work. As will be seen on the map, there will be marked places that represent where the company performed surveys. One of our clients required an image of a map for print. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |