JavaTutorial #10 : How to create Maps Aplication (Google Maps in Desktop Version) with java using Netbeans

in utopian-io •  19 days ago

Repository

https://github.com/dmlloyd/openjdk

What Will I Learn?

  • You will learn about JFXPanel Package
  • You will learn how to create mini browser with java programing
  • You will learn how to get a location typing by user on textfield from GoogleMap
  • You will learn how to display location result on mini browser using JFXPanel package

Requirements

  • NetBeans IDE Software
  • Basic Knowledge about Java Programing and Netbeans

Difficulty

  • Basic

Tutorial Contents

On this occasion we will create a desktop application to display the actual location as well as google maps. In accordance with the title of this contribution, we will make this application using java programming language.

The application that we will create consists of a form which contains a textfield and a button. When the user inputs a location in the textfield and presses the search button, this application will display a map of that location.

Where do we take the location data? whether from ourselves or we take it from another platform. We retrieve location data from Google Map, because for now Google Map is one of the best map applications. How do we do it? let's look at the following tutorial.

Create a Form
  • open Netbeans IDE software then creat new project

  • Add new JFrame form

  • Design the form that must contain a textfield and a button like following screenshot

  • Rename the variable of the components

Edit The Source Code
  • Double click on jbutton in design until appear like this

add the some method. here I rename the locate() method

  • Left Click on hint simbol then double click on create method

  • Scroll the code page to bottom until you get like this

  • Create a string variable to accommodate the Text that input by user.
    String a=location.getText().replace(" ","+");

replace() method we use to replace the space that input by user with the + sign. Why ? because we will get map from google map link, and no space in link but usually used + sign to replace the space

  • Add a code to open new JFrame Form for displaying the map later.
        final JFrame frame=new JFrame();
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setSize(1280,720);

frame the variable name for new JFrame. setDefaultCloseOperation method to set the the exit button on right-top corner. setSize() is method to set the width and height of the new frame

Note : before adding the above code you need to import package import javax.swing.JFrame;

  • initialize new JFX panel to open the mini browser for displaying the map then add the jfxpanel on jframe
        final JFXPanel fxpanel=new JFXPanel();
        frame.add(fxpanel);
  • add the code to open the mini browser
Platform.runLater(new Runnable(){
            @Override
            public void run() {
                WebEngine engine;
                WebView wv =new WebView();
                engine=wv.getEngine();
                fxpanel.setScene(new Scene(wv));
                engine.load("https://www.google.com/maps/place/"+a);         
            }
        });

Platform.runLater method to run some task on JFXpanel
@Override to implement all abstract method
public void run() is run method.
WebEngine engine; Inisialize web engine
WebView wv =new WebView(); inssialize web view
engine=wv.getEngine();get view from web engine
fxpanel.setScene(new Scene(wv));set scene on JFXpanel
engine.load("https://www.google.com/maps/place/"+a); load the url

How to set URL for displaying some place

Here I will explain how to create a url to display the location of google map.

  • Try to open google map on your browser and type some location on search field then press enter

  • you can see the string las Vegas in url

  • So the default url is https://www.google.com/maps/place/. To get some location we need just add string after default url.

  • You can see engine.load("https://www.google.com/maps/place/"+a);. I set the default url and combine with some variable that contain the location input by user.

Running Aplication

Click the play button to run the project. Then type some location to try it

Press the search button to see location

Curriculum

Proof of Work Done

https://gist.github.com/team2dev/78f3a864dbbe9c29b7c7c615b584ddff

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution. Below is our feedback:

  • Your text has some serious language issues, please work on improving your language
  • The flow of your tutorial is somewhat inconsistent, many items or steps are missing.
  • There are many errors in the top screenshots of your tutorial, why would those show? and it might be useful to explain those to users and/or how to avoid them.
  • Your tutorial is labelled basic, yet you do not explain where portions of the code need to be placed, for example in the section "add the code to open the mini browser", whereby you also have an undefined variable called "a" which is nowhere referenced or defined.
  • Use better variable naming, a does not make much sense.
  • You mentioned many topics in the introduction, yet most of those topics are barely touched upon in the tutorial. I would suggest if you're not focusing on a topic, do not mention it.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @mcfarhat!

So far this week you've reviewed 3 contributions. Keep up the good work!

Hi @team2dev!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @team2dev!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!