Using google maps to develop positioning function in angular4 +

Posted by linux1880 on Thu, 02 Jan 2020 04:31:27 +0100


Here is the link to register google map api key( I am a link. ), the unregistered partners can register. google map needs to be used.

Here is the JS tutorial link( Tutorial links ), and Official documents

In addition, there must be a VPN, or the map will not load


First, create an angular4 + program,

ng new googlemapdemo

This is very simple, not to mention alone. Then find index.html in the generated file and add the import file

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
// The two css files are reference styles, which are easy to avoid
  <link rel="stylesheet" href="assets//css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/fontsomeawe/css/font-awesome.min.css">
// This is something that google map must refer to, and it's accessed through the network
// Key is the api key you applied for. If you don't have a key, you can delete the key parameter directly and use it normally
// v=3.31 is version, can not        
// libraries=places, which is very important, cannot be removed
  src=" = the key & libraries you applied for = places & v = 3.31 ">
// You can refer to jq and bootstart
  <script src="assets/js/jquery-3.1.1.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>


Then create a new component

ng g compnent searchbox

Add in serchbox.ts, which has detailed comments and no more description

import { Component, OnInit, AfterViewInit } from '@angular/core';
declare const $: any;
declare const google: any;
  selector: 'app-searchbox',
  templateUrl: './searchbox.component.html',
  styleUrls: ['./searchbox.component.css']
export class SearchboxComponent implements OnInit,AfterViewInit {

  constructor() { }

  ngOnInit() {


private map;

  ngAfterViewInit() {
    const that = this;
// Initialize map, add positioning, zoom in, display style parameters = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 34.61392284366256, lng: 112.4535423212591},
      zoom: 15,
      mapTypeId: 'roadmap'

   // Location code to locate the current location
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      const marker = new google.maps.Marker({
        position: pos,


    // Relation between search box and map
    let input = document.getElementById('pac-input');
    let searchBox = new google.maps.places.SearchBox(input);
    const floattop = document.getElementById('floattop');[google.maps.ControlPosition.TOP_CENTER ].push(floattop);

    // Triggered when the visual range is modified'bounds_changed', function() {
      // Set search range to current window range

    let markers = [];
    // Triggered when search location changes
    searchBox.addListener('places_changed', function() {

    function searchboxchange(){
      let places = searchBox.getPlaces();

      if (places.length == 0) {

      // Clear out the old markers.
      markers.forEach(function(marker) {
      markers = [];

      // Set search area... Nothing in brackets should be the whole picture
      let bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log('Returned place contains no geometry');
        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          position: place.geometry.location

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
        } else {



Add searcbox.html content at the same time

<div id=floattop>
    <input id="pac-input" class="controls form-control" type="text" placeholder="Search Box">
<div id="map"></div>

Add searchbox.css style

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
 #map {
  height: 500px;
  width: 100%
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;

#infowindow-content .title {
  font-weight: bold;

#infowindow-content {
  display: none;

#map #infowindow-content {
  display: inline;

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;

.pac-controls {
  display: inline-block;
  padding: 5px 11px;

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;

#pac-input:focus {
  border-color: #4d90fe;

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
#target {
  width: 345px;

Add < app searchbox > < app searchbox > to app.component.html, and then run it!

The results are as follows


There are often problems with registering and using API keys. It's better to buy one with the ability

Topics: Google VPN network JQuery