CODEWITHSUNDEEP
google-mapsjquery-gmap3
samuel_R
samuel_R

Reputation: 571

how setting a location by latitude longitude in gmap3

good afternoon, I am using the plugin gmap3 (http://gmap3.net), and I am not able to set the location where you will center the map and display the marker.

Explanation: I save the value of latitude and longitude in the database. For example "-29.165708760531277, -51.51253212137226". and another screen, I want to open showing that location. I'm trying to do this:

   var localizacao = $("#localizacao").text();

        $("#mapEditar").gmap3({
          marker:{
            latLng: [localizacao],
              draggable:true
            },
          },
          map:{
            options:{
              zoom: 16,
              mapTypeId:google.maps.MapTypeId.HYBRID,
            }
          }
        });

where the variable "localizacao", this value will be the longitude latitude.

But using this way, it is not showing the map. Is there a better way to do this? What do am I doing wrong?

thank you

Upvotes: 1

Views: 2233

Answers (1)

user1234
user1234

Reputation: 8978

Well to start it looks like you have an extra curly brace in your code

var localizacao = $("#localizacao").text();

$("#mapEditar").gmap3({
      marker:{
        latLng: [localizacao],
          draggable:true
        },
      //}, REMOVED
      map:{
        options:{
          zoom: 16,
          mapTypeId:google.maps.MapTypeId.HYBRID,
        }
      }
    });

And for why latLng is not working with [localizacao], it is because latLng takes two separate parameters separated by a comma, like ["-29.165708760531277", "-51.51253212137226"]. The variable localizacao contains a string in the form "-29.165708760531277, -51.51253212137226" which results in ["-29.165708760531277, -51.51253212137226"], which won't work because there is only one parameter.

var lat = $("#localizacao_lat").text();
var lng = $("#localizacao_lng").text();

$("#mapEditar").gmap3({
      marker:{
        latLng: [lat, lng],
          draggable:true
        },
      map:{
        options:{
          zoom: 16,
          mapTypeId:google.maps.MapTypeId.HYBRID,
        }
      }
    });

Here's a JSFiddle that might help :)

Upvotes: 1

Related Questions