PUBLIC - Liferay Portal Community Edition

upgrade to google maps API v3

Details

  • Similar Issues:
    Show 5 results 

Description

upgrade to GOOGLE MAP API VERSION 3

Currently it uses GMap2 like:

<portlet:namespace />map = new GMap2(document.getElementById("<portlet:namespace />map"));

use GOOGLE MAP API VERSION 3 like

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Issue Links

relates

Bug - A problem which impairs or prevents the functions of the product. LPS-26074 Update Google Maps plugin to version 3 of the Maps Javascript API

  • Minor - Minor loss of function, or other problem where easy workaround is present.
  • Closed - The issue is considered finished, the resolution is correct. Issues which are not closed can be reopened.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Juan Fernández added a comment -

Moved to community backlog: this feature is interesting and can be implemented by the community or Liferay as an extra functionallity.
We will appreciate if you or any community member contribute this functionality
Thanks for your feedback

Show
Juan Fernández added a comment - Moved to community backlog: this feature is interesting and can be implemented by the community or Liferay as an extra functionallity. We will appreciate if you or any community member contribute this functionality Thanks for your feedback
Hide
Permalink
Jonas Yuan added a comment -

Integration of Google Maps JavaScript API V3 was addressed at
http://www.liferay.com/web/jonas.yuan/blog/-/blogs/bringing-google-maps-javascript-api-v3-into-liferay-web-and-wap

Show
Jonas Yuan added a comment - Integration of Google Maps JavaScript API V3 was addressed at http://www.liferay.com/web/jonas.yuan/blog/-/blogs/bringing-google-maps-javascript-api-v3-into-liferay-web-and-wap
Hide
Permalink
Zsolt Szabo added a comment -

Hi Jonas,

I'm working on this issue because I think the GoogleMaps a very intresting area.
We may the specification together. Or/And If you have some ideas, demo or code snippet you can send to me.

Thanks the contribution,
Zsaga

Show
Zsolt Szabo added a comment - Hi Jonas, I'm working on this issue because I think the GoogleMaps a very intresting area. We may the specification together. Or/And If you have some ideas, demo or code snippet you can send to me. Thanks the contribution, Zsaga
Hide
Permalink
Jonas Yuan added a comment -

Hi Zsaga,

The following is sample code you may refer to:

In general, you can bring Google Maps JavaScript API V3 into Liferay WEB and WAP in three steps.

  • Declare a true DOCTYPE within your web application. That is, declare the applications as HTML5 using the simple HTML5 DOCTYPE as shown below

<!DOCTYPE html>

  • For the map to display on a web page, you must reserve a spot for it by creating a named div element and obtaining a reference to this element in the browser's document object model (DOM).

<div id="map_canvas" style="width: 100%; height: 100%"></div>

  • Add JavaScript calls as follows

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">

function initialize() {

var <portlet:namespace />geocoder = new google.maps.Geocoder();

var myLatlng = new google.maps.LatLng(-34.397, 150.644); // add predefined address
var myOptions =

{ zoom: 8, // set up zoom center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }

var <portlet:namespace />map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}
</script>

As you can see, JavaScript specifies the JavaScript class that represents a map is the Map class.

var <portlet:namespace />map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Of course, you can add your JavaScript code inside the method initialize().

Please let me know if you have any questions,

Thanks

Jonas Yuan

Show
Jonas Yuan added a comment - Hi Zsaga, The following is sample code you may refer to: In general, you can bring Google Maps JavaScript API V3 into Liferay WEB and WAP in three steps. Declare a true DOCTYPE within your web application. That is, declare the applications as HTML5 using the simple HTML5 DOCTYPE as shown below <!DOCTYPE html> For the map to display on a web page, you must reserve a spot for it by creating a named div element and obtaining a reference to this element in the browser's document object model (DOM). <div id="map_canvas" style="width: 100%; height: 100%"></div> Add JavaScript calls as follows <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function initialize() { var <portlet:namespace />geocoder = new google.maps.Geocoder(); var myLatlng = new google.maps.LatLng(-34.397, 150.644); // add predefined address var myOptions = { zoom: 8, // set up zoom center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var <portlet:namespace />map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> As you can see, JavaScript specifies the JavaScript class that represents a map is the Map class. var <portlet:namespace />map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); Of course, you can add your JavaScript code inside the method initialize(). Please let me know if you have any questions, Thanks Jonas Yuan
Hide
Permalink
Zsolt Szabo added a comment -

I have been informed that this upgrade is not necessary.

Show
Zsolt Szabo added a comment - I have been informed that this upgrade is not necessary.

People

Vote (0)
Watch (1)

Dates

  • Created:
    Updated:
    Resolved:
    Days since last comment:
    1 year, 33 weeks, 2 days ago