1
votes

So i tried to find some documentation about how to center the map on a marker, but somehow it doesn't work for me.

In the example on the Gmap3 page it works fine without adding the "center" to the map options, for me even with the "center:latLng" it wouldn't work.

so i tried some different combination nothing really works for me..

then i tried to extract the latitude and longitude separately and checked the numbers i get on a site that allows to enter lat and lng, and i realized that the coords are not those of the marker, so i don't know if i extract them right or there is another problem.

this is my code right now-

$("#mapholder").gmap3({
    getgeoloc:{
        callback : function(latLng){
        //here is where i tried to get the lat and lng out of the latLng
            lat = parseFloat(latLng.A.toFixed(6));
            console.log(typeof(lat));
            lng = parseFloat(latLng.k.toFixed(6));
            lat_Lng = latLng;
            console.log("latitude: "+lat+" , longtitude: "+lng);
            console.log("typeof latlng: "+typeof(latLng));
            if (latLng){
                $("#mapholder").gmap3({
                    map:{
                        options:{
                            center:latLng,
                            zoom: 5
                        }
                    },
                    marker:{ 
                        latLng:latLng
                    }
                 });
             }
        }
    }
});

another way i tried it was

center:[lat,lng]

and even without any center like in the demo it didn't work.

Thanks a lot for any help!

UPDATE

could it have anything to do with the callback function that doesn't allow those parameters?

i also tried to add a data type to the marker so it would say "You are here!", this doesn't work either.

2
What is the output of console.log("latitude: "+lat+" , longtitude: "+lng); and what is the approximate location it should show?dkasipovic
D.Kasipovic - it gives an output of points but not where the marker is set. checked it via this site itouchmap.com/latlong.html.Michael
I am not sure I follow. Can you post an online example somewhere?dkasipovic

2 Answers

2
votes

The script as it is works correct, there is an issue with your demo:

When gmap3 creates the map-instance while the "My Places"-tab is hidden #mapholder doesn't have a size(the center of the map is the top-left corner of the map in this case).

When you select the "My Places" -tab the first time after the map-instance has been created you must trigger the resize-event for the map and re-assign the center:

  $(link).fadeIn(1000, function(){
    $(link).addClass("current");
    if(link==='#myPlaceSection' && lat_Lng){
        $('#mapholder').gmap3({trigger:"resize"});
        $('#mapholder').gmap3({map:{options:{center:lat_Lng}}});
        lat_Lng=null;
      }
    }  
  );
0
votes

As per the reference you need to give the latLong as below:

map:{
  options:{
  center: new google.maps.LatLng(lat,lng),
  zoom: 5
},

Reference is here.

Try this. This will work for you.