Follow Us on Twitter

Integrate Google Maps in Oracle JET

by Herman Brunnekreef on February 12, 2016 · 3 comments

I would like to integrate Google Maps in Oracle JET. This can be very helpful if you want to know where your customers are located. For example, in the customer database you can save the latitude and longitude of the location where your customer is located.

For this demo I created an array with places and their corresponding latitudes and longitudes.

var locations = [{name: "AM", lat: "52.37", lon: "4.89"},
{name: "SF", lat: "37.77", lon: "-122.42"},
{name: "TO", lat: "35.69", lon: "139.69"},
{name: "NY", lat: "40.71", lon: "-74.01"},
{name: "CT", lat: "-33.93", lon: "18.42"}];

To solve the integration, I did the following steps:

First you need to get a Google API key; you can get it here

Then you have to add the google API to your project:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY">

Now let’s create the selectbox:

<select id="SelectTitle" data-bind="ojComponent: {component: 'ojSelect', optionChange: optionChangedHandler, value: SelectLocationValue}">
<option value="AM">Amsterdam</option>
<option value="SF">San Fransisco</option>
<option value="TO">Tokio</option>
<option value="NY">New York</option>
<option value="CT">Capetown</option>
</select>

And this is the place to show the map:

<div id="googleMap" style="width:500px;height:380px;">

In the main.js first initialise the selectbox:
self.SelectLocationValue = ko.observable();
self.SelectLocationValue(“AM”);

Then get the right latitude and longitude and show it on the map:

function createMap() {
   for (var g = 0; g < locations.length; g++) {
       if (String(self.SelectLocationValue()) == locations[g].name)
       {
          var lat = locations[g].lat;
          var lon = locations[g].lon;
       }
   }
   var map;
   var mapProp = {
         center: new google.maps.LatLng(lat, lon),
         zoom: 14,
         mapTypeId: google.maps.MapTypeId.ROADMAP
        };
   map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
   }
   ;

Then when the user changes the location, the optionchangedHandler is fired:

this.optionChangedHandler = function (event, data) {
                    if (data.option == "value") {
                        createMap();
                    }
                }

That’s all. Let’s run the application:
img1

When the user changes the selection, the map is also changed to the new location:
img2

Integrate Google Maps in Oracle JET, 5.0 out of 5 based on 1 rating
Ratings:
VN:D [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

{ 3 comments… read them below or add one }

Geertjan February 12, 2016 at 6:37 pm

Excellent!

Reply

Randheer April 29, 2016 at 11:07 am

Hi Herman ,
Thank you so much for such a nice post.
it is really very helpful. and I am able to implement it easily.

I have a small query though.
Similar to this google maps API , do we have Oracle Maps APi available, which can replace it?

Thank a lot again!

Reply

Bakthi January 13, 2017 at 7:36 pm

Nice to know JET integration with Google Maps.

I’m looking for esri maps integration with Oracle JET. Is it available?

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter