Cordova Google Maps Tutorial

In this tutorial, I’m going to explain how to Integrate Google Maps with Phonegap / Apache Cordova based Projects.

Step by Step Guide:

1. Create a Cordova Project:

cordova create GMapExample com<span class="hljs-selector-class">.codesundar</span><span class="hljs-selector-class">.gmapexample</span> GMapExample

2. Change Working Directory

<span class="hljs-built_in">cd</span> GMapExample

3. Add Platform

cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova platform <span class="hljs-keyword">add</span><span class="bash"> ios</span>

4. Add Plugin http://github.com/apache/cordova-plugin-geolocation

cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-geolocation</span>

5. Add Google Map JavaScript Library with your index.html

<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://maps.google.com/maps/api/js"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

6. Get User’s location using Geolocation plugin

navigator.geolocation.getCurrentPosition(onSuccess, onError, {
    timeout: <span class="hljs-number">30000</span>
});

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onSuccess</span><span class="hljs-params">(position)</span> </span>{
    <span class="hljs-keyword">var</span> lat = position.coords.latitude;
    <span class="hljs-keyword">var</span> lang = position.coords.longitude;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span><span class="hljs-params">(error)</span> </span>{
    alert(<span class="hljs-string">'code: '</span> + error.code + <span class="hljs-string">'\n'</span> + <span class="hljs-string">'message: '</span> + error.message + <span class="hljs-string">'\n'</span>);
}

Integrate Google Map with PhoneGap Full Code

<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Geo Location<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css">
        <span class="hljs-selector-tag">html</span> {
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>
        }

        <span class="hljs-selector-tag">body</span> {
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>
        }

        <span class="hljs-selector-id">#map-canvas</span> {
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>
        }
    </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://maps.google.com/maps/api/js"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        navigator.geolocation.getCurrentPosition(onSuccess, onError, {
            <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
        });

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onSuccess</span>(<span class="hljs-params">position</span>) </span>{
            <span class="hljs-keyword">var</span> lat = position.coords.latitude;
            <span class="hljs-keyword">var</span> lang = position.coords.longitude;

            <span class="hljs-comment">//Google Maps</span>
            <span class="hljs-keyword">var</span> myLatlng = <span class="hljs-keyword">new</span> google.maps.LatLng(lat, lang);
            <span class="hljs-keyword">var</span> mapOptions = {
                <span class="hljs-attr">zoom</span>: <span class="hljs-number">4</span>,
                <span class="hljs-attr">center</span>: myLatlng
            }
            <span class="hljs-keyword">var</span> map = <span class="hljs-keyword">new</span> google.maps.Map(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'map-canvas'</span>), mapOptions);
            <span class="hljs-keyword">var</span> marker = <span class="hljs-keyword">new</span> google.maps.Marker({
                <span class="hljs-attr">position</span>: myLatlng,
                <span class="hljs-attr">map</span>: map
            });
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span>(<span class="hljs-params">error</span>) </span>{
            alert(<span class="hljs-string">'code: '</span> + error.code + <span class="hljs-string">'\n'</span> +
                <span class="hljs-string">'message: '</span> + error.message + <span class="hljs-string">'\n'</span>);
        }
        google.maps.event.addDomListener(<span class="hljs-built_in">window</span>, <span class="hljs-string">'load'</span>, onSuccess);
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"map-canvas"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

7) Build your project & Run it

cordova <span class="hljs-keyword">build </span><span class="hljs-keyword">android</span>

Not Working?

Check your Internet connection
Make sure, you’ve enabled “Location Option” under your Phone Settings