Skip to content

First Example

Masashi Katsumata edited this page Feb 23, 2014 · 2 revisions

The below code explains how to control the PhoneGap-GoogleMaps-Plugin.

FirstExample

//Define the location
var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);

//Initialize a map
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {
  
  // The map is initialized, then show a map dialog
  map.showDialog();

  // Add a marker onto the map
  map.addMarker({
    'position': GOOGLE,
    'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
    'snippet': "This plugin is awesome!"
  }, function(marker) {
    
    // Move camera position
    map.animateCamera({
      'target': GOOGLE,
      'zoom': 15
    }, function() {
      
      //Show the infoWindow assigned with the marker
      marker.showInfoWindow();
    });
  });
});

First of all, you need to get a map using plugin.google.maps.Map.getMap(). This method returns a Map class instance, but you have to wait the MAP_READY event for initialization.

//Initialize a map
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) { ... });

Then, you can show a map dialog using map.showDialog().

map.showDialog();

After that, this code adds a marker onto the map using map.addMarker(). The title property is displayed with bigger font. This property accepts multiple lines text. The addMarker() method passes a Marker class instance to the callback as arguments.

map.addMarker({
  'position': GOOGLE,
  'title': ["Hello Google Map", "for", "Cordova!"].join("\n"),
  'snippet': "This plugin is awesome!"
}, function(marker) { ... });

And change the viewport camera position using map.animateCamera() method. You just need to set target and zoom properties. This plugin handles the camera position good well.

map.animateCamera({
  'target': GOOGLE,
  'zoom': 15
}, function() { ... });

Finally, show the InfoWindow assigned with the marker using marker.showInfoWindow() after the camera animation is finished.

marker.showInfoWindow();

Join the official community

New versions will be announced through the official community. Stay tune!

Do you have a question or feature request?

Feel free to ask me on the issues tracker.

Or on the official community is also welcome!


New version 2.0-beta2 is available.

The cordova-googlemaps-plugin v2.0 has more faster, more features.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md

Clone this wiki locally