CODEWITHSUNDEEP
htmlcordovamaps
Sithys
Sithys

Reputation: 3803

Cordova include GoogleMaps in <a href="">

i'm new to Stackoverflow but i've read a lot!

I'm from Germany, so sorry if sth is unclear.

Im new to Cordova. I'm programming an App for tourists. I have a Button inside my App called "Card". I would like to show my position inside the app when someone clicks on the Button but that doesn't work :-/

What i tried was:

<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title:"You are here!"
});
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}

</script>

and then in HTML 

<a href="#" onclick="success()"></a>

without the first space, but stack doesn't display the code without it.

I hope, that someone can help me. A tutorial how to change my code for making it work would be great!

Greeting!

EDIT: How to solve this problem: Guys...it was MUCH easier!!

I just added <a href="#" onclick="window.open('http://www.maps.google.de/', '_blank', 'location=yes', 'presentationstyle=fullscreen')"></a>

to my button... now it opens it like i want to open it!

Upvotes: 0

Views: 275

Answers (3)

Navneeth
Navneeth

Reputation: 988

Try these html. its working one. 

 <DOCTYPE html>
        <html>
            <head>
                <script type="text/javascript" src="cordova.js"></script>
        <script src="http://www.google.com/jsapi"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="js/jquery-2.0.2.js"></script>
        <script type="text/javascript">
            google.load('maps', '3', {
                        other_params: 'sensor=false'
                        });

       google.setOnLoadCallback(initialize);

    function initialize() {
                                  initializeMap();
       }

    function initializeMap()
    {
        $("#map").html("");
        map = new google.maps.Map(document.getElementById('map'), {
                                  zoom: 12,
                                  center: new google.maps.LatLng(32.083300, 34.800000),
                                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                                  mapTypeControl:false,
                                  streetViewControl:false,

                                  });
                                  alert("Map Started--------------------");
    }



function getlocation()
{
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
var lnglat;
   var mylocationpng = 'mylocation.png';
   var mymarker=null;
function onSuccess(position)
{
    var lng = position.coords.longitude;
    var lat = position.coords.latitude;

     lnglat = new google.maps.LatLng(lat,lng);
     var currentlocationpng = new google.maps.MarkerImage(mylocationpng,new google.maps.Size(42, 42));
     map.panTo(lnglat);

            if(mymarker==null)
            {
                mymarker = new google.maps.Marker({
                                                  position: lnglat,
                                                  draggable: false,
                                                  icon: currentlocationpng,
                                                  map: map
                                                  });

            }
            else
            {
                //alert('again');
                mymarker.setPosition(lnglat);

            }
        //alert('done');
}

function onError()
{
    alert("Can't show current location");
}


    </script>
</head>
    <body>

    <div id="temp">
    <img src="mylocation.png" width="30" height="30" id="mylocation" onclick="getlocation()"/>
    </div>
    <div id="map"></div>
</body>
</html>

Upvotes: 3

LarsBauer
LarsBauer

Reputation: 1545

Use HTML5 geolocation the following way:

function getPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (data) {
            var position = data.coords;
            //call your success function
            success(position);
        }, function (error) {
            //whatever
        });
    } else {
        //whatever
    }
}

In your link set onclick on this function:

<a href="#" onclick="getPosition()"></a>

Use the received coordinates like this in your success() function:

var coords = new google.maps.LatLng(position.latitude, position.longitude);

This should work.

Upvotes: 0

HoangHieu
HoangHieu

Reputation: 2840

your

function success(position)

, require "position" but when you call function you don't send it everything?? 

<a href="#" onclick="success()"></a>

you can create function ex: 

> function get_location(){ 
>     if (navigator.geolocation) 
>     { 
>           navigator.geolocation.getCurrentPosition(success); 
>     } else 
>     {
>         error('Geo Location is not supported'); 
>     }  }

and call it went user click 

<a href="#" onclick="get_location()"></a>

Upvotes: 0

Related Questions