This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Because the business of the company has changed from the domestic market to the international market, some international business projects need to use Google Map. After the project is completed, write out some commonly used methods for your reference.

One, custom information window, custom icon and custom control

Var Marker = new google.maps.marker ({position: myLatLng, icon: '.. PNG ', // if empty, display the default icon map: map}); HtmlWindow = "<div class='wrapBox'>\ <div>IMEI: "+ imei + "</div>\ <div>Address: <span id='map-address'>" + pointToAddress(mycenter.lat, mycenter.lng) + "</span>" + info + "</div>\ <div>Speed: Km/h speed "+ +" < / div > \ < div > Time: "+ toDate 16:12:50 (2018-12-17) +" < / div > \ < / div > "; Var infoWindow = new Google.maps.infoWindow ({content: htmlWindow, disableAutoPan:true // Disable automatic translation function when set to true}); // Open infowindow.open(map, marker); AddListener ('click', function() {infowindow.close(); }); . / / monitor X close button event Google maps. The event. The addListener (infowindow, "closeclick", function () {infowindow. Close (); });Copy the code

The custom tag and custom message window are relatively simple, as shown in the figure above (center). What if we want to change the default control position of the map or need custom controls? Then look down. The gooGL Map controls are enabled by default: MapTypeControl // mapTypeControl zoomControl // map zoomControl streetViewControl // minions streetViewControl fullscreenControl // fullscreenControl By default, panControl, scaleControl, overviewMapControl, and rotateControl:true are not enabled

Var myOptions2 = {zoom: 15, center: myLatLng, mapTypeControl: false, zoomControl: true, zoomControlOptions: { style:google.maps.ZoomControlStyle.SMALL, position:google.maps.ControlPosition.LEFT_BOTTOM } };Copy the code

All controls have the position attribute, which represents the position of the control. The options include: OTTOM, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT, CENTER, LEFT, LEFT_BOTTOM, LEFT_CENTER, LEFT_TOP, RIGHT, RIGHT_BOTTOM, RIGHT_CENTE R, RIGHT_TOP, TOP, TOP_CENTER, TOP_LEFT, TOP_RIGHT. Remember no relationship, you might as well the console. The log (Google) maps) ControlPosition) try.

Only some controls have a style property, and they are all different.

Address resolution

Function pointToAddress(lAT, LNG, lAT); Backcall) {// Instantiate the Geocoder service to resolve addresses var Geocoder = new Google.maps.geocoder (); GeocoderRequest is location, and the value type is LatLng. So we want to instantiate the longitude and latitude geocoder. Geocode ({location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) { if (status == google.maps.GeocoderStatus.OK) { backcall(results[0].formatted_address); } else {console.log(" : error "+ status); }}); } pointToAddress(mycenter.lat, mycenter.lng, function (address) {// get the address console.log(address); });Copy the code

We can see that the name of the control on the map is displayed in Chinese, if the user’s phone system is In English, the map will automatically switch to English. For a temporary update here, go to the blogger’s post for a replay of the Google Map implementation track.