Google Maps Example Code

About This Space

A basic example of using Google Maps Address Autocomplete in a Rich Display Screen and a Google map view


Last updated on June 4, 2020

Forked from: /al3/google-maps-example-code/

Public Permissions:   View   Open/Fork   Run   Comment  

Google Maps Platform Example

This space provides an example of using Google Maps Cloud Platform. The space provides an example of the Address Auto-Complete and a Map view.

The auto-complete in the example is intended to allow you to search for a street address for a location and name the location yourself by specifying a name in the name field. The auto-complete can be used to seaarch for places and landmarks also.

Using This space

In order to use this space:

  • Fork this space to your own space
  • Create a Google Platform Account Google Maps Platform and create an API Key
  • Open the app.json file
    • Select the Main screen format in the upper right corner
    • Edit the External Javascript 2 value and replace [YOUR GOOGLE MAP PLATFORM API KEY] with your API Key

Client code

The Google Maps .js file is included by adding it to the External JavaScript files in the app.json Main screen format.

The code for handling the Autocomplete and loading the map is all client side JavaScript stored in the clientcode.js file.

Using the app

When the page loads the map view is positioned on the user's general area

Screenshot

Enter a Name and then search for the address.

Screenshot

Once an address is selected from the auto-complete list the map will reposition and a marker will be placed. Click the Save button to save the information.

Screenshot

Clicking on a row in the list will display that location on the map.

Screenshot

Google Maps account

The Google Maps Platform requires a account. To use this example with your own Google Maps account fork the google-maps-example-code space and then update the External JavaScript file(2) in the app.json Main screen format and add your API Key.

This space was base don the Google Maps example here:

Be the first to comment:      

Comments

Write Preview Markdown: bold italic code link
Post

More Spaces By Saidur (@saidur)

Filters:

Popular Recent

Basic setup for a Hello World React.js App

5696

0

0

React.js using Rich Display Components built in the Visual Designer

5638

0

0

React.js using Rich Display Components built in the Visual Designer

6026

0

0

Interfaccia creata con React.js e Rich Display direttamente nel Visual Designer

6542

0

0

A simple dashboard example that uses responsive design

5659

0

0

A demo of how to build and consume Web Services with and without parameters

5710

0

0

A Hello World app with both dynamic output and input fields

5942

0

0

RPG Application that allows you to work with Insurance Claims converted to Node.js to run in the cloud, using any database

6126

0

0

A demo of how to build and consume Web Services from both the server side and with AJAX on the client side

5964

0

0

A simple Demo of how to deploy EJS templates from a stateful Node.js script

6044

0

0

This is a simple demo of Fibers! Fibers simplifies code by avoiding messy code known as "callback hell", "promises hell", or "async/await hell". Once Fibers is setup, you never have to think about callbacks or promises (they are handled automatically for you).

5969

0

0

Just a cool demo of how to use other npm packages on NodeRun!

5566

0

0