Display Google Maps inside jQuery Dialog Modal Popup Window passing address

Question

Working with google map API for the first time. I am trying to open google maps on a button click inside a pop up window passing address instead of latitude and longitude.

I was able to do this with out issues with below code passing lat and long.

 $(function () {
        $("#btnmap").click(function () {
           // debugger;
            $("#dialog").dialog({
                modal: true,
                title: "Location",
                width: 600,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
                    //debugger;
                    var mapOptions = {
                        center: new google.maps.LatLng(34.095131, -84.258404),
                        zoom: 18,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    }
                   // debugger;
                    var map = new google.maps.Map($("#canvasMap")[0], mapOptions);
                }
            });
        });
    });

I understand I need to use geocode to use address instead or coordiates. and tried using below script

 function initialize() {
        debugger;
        var map = new GMaps({
            lat: 0,
            lng: 0,
            zoom: 0
        });

        GMaps.geocode({
            address: $("#lblOfficeAddress").text(),
            callback: function (results, status) {
                alert(address);
                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);

but not sure how can I combine these two to open maps.

Answer 1

Inside your open function, rather than setting the center and zoom properties of the map, call the geocoder, and use the result to set the map center.

var geocoder = new google.maps.Geocoder();
geocoder.geocode({
  address: $("#lblOfficeAddress").text()}, function(results, status) {
  if (status == "OK") {
      console.log("location=" + results[0].geometry.location.toUrlValue(6));
      map.setCenter(results[0].geometry.location);
      map.setZoom(18);
  } else alert("Geocode failed, status=" + status);
});

proof of concept fiddle

code snippet:

$(function() {
  $("#btnmap").click(function() {
    // debugger;
    $("#dialog").dialog({
      modal: true,
      title: "Location",
      width: 600,
      height: 450,
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      },
      open: function() {
        //debugger;
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // debugger;
        var map = new google.maps.Map($("#canvasMap")[0], mapOptions);

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          address: $("#lblOfficeAddress").text()
        }, function(results, status) {
          if (status == "OK") {
            map.setCenter(results[0].geometry.location);
            map.setZoom(18);
          } else alert("Geocode failed, status=" + status);
        });
      }
    });
  });
});

html,
body,
#canvasMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<button id="btnmap">MAP</button>
<div id="dialog">
  <div id="canvasMap"></div>
</div>
<div id="lblOfficeAddress">
  13560 Morris Rd, Alpharetta, GA 30004, USA
</div>