Learning and Sharing about Google Maps JavaScript API

Recently, I participated in the project of inserting the Google Maps API on the page, so share my learning experience here, write for the first time, please wait!

First, talk about the company's needs, click on the product list on the web page, render the corresponding map information and the corresponding details, and modify Google's inherent tags and click on the tag to present the model, displaying the details and the corresponding products.

Load the Google API and insert the page

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
   
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
    </script>
  </body>
</html>

And the company needs us to count the tags as the map gets taller, which is exactly what Google maps api has designed for:'Marker Clustering'[Marker Clustering]

 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
 <script>
var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
   
      ]
  // Traverse all coordinate points and add
var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add Cluster Tag imagePath: Tag Picture Style
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
</script>

If you need to style your cluster labels, you can use:

map.data.Setstyle(function(){
          var magitude = featrue.getProperty('map');
          return {
             icon:getCircle(magitude);
            
          }
});
function gitCircle(magitude){
         var circle = {
               path:google.maps.Symbolpath.CIRCLE,
               scale:magnitude,
         };
         return circle;
  }

gitCircle() draws a custom circle and callbacks maps as the custom tag.

After initializing the rendering of the map, you need to monitor the interaction of the map

Self-perceived action events that are frequently used:

bounds-changed: interface changed
center-changed: the center point changes
click: click
dbclick:Double-click
Drag:drag
heading-changed: heading change
maptypeid: map style change
mousemove: move on the map
rightclick: high click
zoom-changed: map height changed

Add event:

map.addListener('dbclick',function(){})

Marker point add event:

markers.map(function(v){
    v.addListener('click',function(){})
})

Delete event: [removeListener]

And there's a need in the project to convert the detailed address to latitude and longitude, so you need to use the Google Maps Geocoding API request interface

Convert address information to latitude and longitude:

$.get('https://maps.googleapis.com/maps/api/geocode/json?address='address information'&key=YOUR_API_KEY', (data)=>{
        latLng = data.results[0].geomety.location
})

Convert latitude and longitude to address information

$.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=longitude, latitude&key=YOUR_API_KEY', =>(data){
     inWhere = data.plus_code.compound_code 
})

These are the google maps API and the Google Maps Geocoding API that I've mainly referenced in a small project

Specific documents:
google maps API

Google Maps Geocoding API

Keywords: Front-end Google Javascript JSON

Added by tlchung on Sun, 16 Jun 2019 20:43:11 +0300

Programming VIP

Learning and Sharing about Google Maps JavaScript API

Popular Keywords