gmaps.js using address instead of latitude longitude

Question

appreciate any help, Im using http://hpneo.github.io/gmaps/ and I was wondering if its possible to use the address instead of latitude longitude

  map = new GMaps({
    el: '#map',
    zoom: 16,
    disableDefaultUI: true,
    lat: {{ $loc->latitude }},
    lng: {{ $loc->longitude }}
  });
  map.addMarker({
    lat: {{ $loc->latitude }},
    lng: {{ $loc->longitude }},
    title: '{{ $loc->name }}',
    infoWindow: {
      content: '<p>{{ $loc->name }}</p>'
    }
  });

You should first reverse geocode address and get latitude-longitude result, then you can use those coordinates to create the map. More info about geocoding api: https://developers.google.com/maps/documentation/geocoding/intro — alpakyol, Feb 26 '16 at 15:24

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Use the Geocoder to translate an address into geographic coordinates that can be used on a map.

Related question: Using Address Instead Of Longitude And Latitude With Google Maps API

proof of concept fiddle

Example with GMaps.js:

code snippet:

function initialize() {
/*Maps*/
var map = new GMaps({
      div: '.map',
      lat: 0, 
      lng: 0,
      zoom: 0
});

GMaps.geocode({
  address: "Oradell, NJ",
  callback: function(results, status) {
    if (status == 'OK') {
      var latlng = results[0].geometry.location;
      map.fitBounds(results[0].geometry.viewport);
      map.addMarker({
        lat: latlng.lat(),
        lng: latlng.lng()
      });
    }
  }
});

}
google.maps.event.addDomListener(window, "load", initialize);

body, html {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div class="map"></div>

gmaps.js using address instead of latitude longitude

1 Answers1