Christian Engvall

How to show a Google map in your Phonegap app using Google Map api V3, and what whitelist urls to add to your project. This post expect you know how to set up a new Phonegap project.

1. Start by adding a reference to Google maps api in index.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

Then add a div that will contain the map. Choose an id like “map_canvas”. That id will be used to add our map from our javascript later on.

<div id="map_canvas">
</div>

##2. Create a new javascript file called googlemap.js in the www folder and add the following content

function GoogleMap(){

this.initialize = function(){
var map = showMap();
}

 var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

return map;
}
}

and add a reference to it in index.html

<script type="text/javascript" src="googlemap.js"></script>

the mapOptions variable contains information about zoomlevel, where the center of the map is and what kind of map we want to show. And the line containing the map variable uses getElementById to get our map_canvas and adding the map.

3. Whitelisting google urls

Now we must add the following urls to our Cordova.plist under externalHosts if using Xcode:

*.google.com
*.googleapis.com
*.gstatic.com

4. Showing the map

To show the map we must run the initialize function in googlemap.js. Since we are using the example index.html from phonegap we add these lines to the onDeviceReady function in index.html

function onDeviceReady(){
    var map = new GoogleMap();
    map.initialize();
}

Now run the app and you should se a map over Australia.

5. Adding markers

To add markers to our map we use the LatLng and Marker object from Google API. Edit the initialize function in googlemap.js to look like this:

function GoogleMap(){

this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
 }

and add the following function, called addMarkersToMap:

var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
 }
}

Here we added a function called addMarkersToMap and called it from the initialize function. What it’s doing is adding two markers on our map at the given latitude and longitude. And when we create a new marker object, like markerOne, we give the object the position and which map we want to add the marker to.

But if we run the app now we only see one marker. Let’s fix that.

6. Zooming out the map to show all markers

to zoom out the map without knowing which zoomlevel to use we are going to use the LatLngBounds object from the Google Map API.

Start off by adding the following line first in the addMarkersToMap function:

var mapBounds = new google.maps.LatLngBounds();

and before the closing tag of the function add these lines:

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);

The addMarkersToMap function now looks like this:

var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();

var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);
 }

Now we’re done, run the app and the map now zooms out so you can see the marker which we added in Sweden.

I’ve created an example application of this and pushed it to a repository on Github, have a look at it if you want to see the code.