7+ Gmaps Js 使い方 Article

Tutorial laravel gmaps basic map using gmaps.js Brillian Solution from blog.brilliansolution.com

Introduction

Gmaps JS is a popular JavaScript library that allows developers to easily integrate Google Maps into their websites. With its intuitive interface and powerful features, Gmaps JS has become a go-to tool for businesses and individuals alike who want to add interactive maps to their web pages. In this article, we’ll explore the basics of using Gmaps JS, including how to install it and how to use its key features.

Installation

Before you can start using Gmaps JS, you’ll need to install it on your website. Fortunately, the process is straightforward. First, download the latest version of Gmaps JS from the official website. Then, extract the files and copy the gmaps.js file to your website’s directory. Finally, include the following code in the head section of your HTML document: ```html ```

Creating a Map

Once you’ve installed Gmaps JS, you can start creating maps. The first step is to create a container for your map. This is typically done using a div element. For example: ```html

``` Next, you’ll need to initialize the map using the Gmaps constructor. You can do this using the following code: ```javascript var map = new Gmaps({ el: '#map', lat: -12.043333, lng: -77.028333 }); ``` This code creates a new map centered on the coordinates (-12.043333, -77.028333). You can customize the map by passing additional options to the constructor.

Adding Markers

One of the most useful features of Gmaps JS is the ability to add markers to your map. Markers are used to indicate specific locations on the map. To add a marker, use the addMarker method: ```javascript map.addMarker({ lat: -12.043333, lng: -77.028333, title: 'Lima' }); ``` This code adds a marker to the map at the coordinates (-12.043333, -77.028333) and sets the title to “Lima”.

Adding Info Windows

Info windows are used to display additional information about a marker when it is clicked. To add an info window, use the addInfoWindow method: ```javascript map.addInfoWindow({ lat: -12.043333, lng: -77.028333, content: '

This is Lima

' }); ``` This code adds an info window to the map at the coordinates (-12.043333, -77.028333) with the content “This is Lima”.

Adding Polylines

Polylines are used to draw lines on the map. To add a polyline, use the drawPolyline method: ```javascript map.drawPolyline({ path: [ [-12.040397656836609,-77.03373871559225], [-12.040248585302038,-77.03993927003302], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042] ], strokeColor: '#131540', strokeOpacity: 0.6, strokeWeight: 6 }); ``` This code draws a polyline on the map with the specified path and style.

Adding Circles

Circles are used to draw circles on the map. To add a circle, use the drawCircle method: ```javascript map.drawCircle({ lat: -12.043333, lng: -77.028333, radius: 500, fillColor: '#00FF00', fillOpacity: 0.5, strokeColor: '#000000', strokeOpacity: 1, strokeWeight: 2 }); ``` This code draws a circle on the map centered on the coordinates (-12.043333, -77.028333) with a radius of 500 meters and the specified style.

Adding Polygons

Polygons are used to draw shapes on the map. To add a polygon, use the drawPolygon method: ```javascript map.drawPolygon({ paths: [ [-12.040397656836609,-77.03373871559225], [-12.040248585302038,-77.03993927003302], [-12.050047116528843,-77.02448169303511], [-12.044804866577001,-77.02154422636042] ], strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); ``` This code draws a polygon on the map with the specified path and style.

Conclusion

In this article, we’ve covered the basics of using Gmaps JS to add interactive maps to your website. From creating a map to adding markers, info windows, polylines, circles, and polygons, Gmaps JS provides a powerful and intuitive interface for working with Google Maps. Whether you’re building a business website or a personal blog, Gmaps JS is a must-have tool for any web developer.