Google Maps and Geocoding API Together

Jul 25, 2015

Previous Google Maps API Discontinued

A couple days ago, I had to upgrade the Google Maps API code, for an application we use for mapping a doctors office location. An example of the resultant map can be found on any doctors profile on LocateADoc.com, such as on the top right side of this page http://www.locateadoc.com/m-kayser-md-facs

In addition, we were using http://geocoder.us/ to determine the Latitude and Longitude of a doctor's address. I went ahead and replaced this with Google's Geocoding API.

 

Previous Maps API Code

 

 Error Returned

 Uncaught TypeError: map.centerAndZoom is not a function

 

Upgrading Google Maps API

Google provides an ok tutorial on how to setup a map, include how to create an API key, which you'll need to access the Map API from your website or websites (The API allows wildcards and multiple websites to be added, to use the same API key).
https://developers.google.com/maps/documentation/javascript/tutorial

And here's the GeoCode API instructions
https://developers.google.com/maps/documentation/geocoding/intro

Not only did I upgrade the API, but I moved the Javascript into an external file, and added listeners to that file. Except for the loadXMLDoc function, I pretty much rewrote all the code.

The resulting code looks similar to this

New Code Accessing Google Maps and Geocode API

Obtaining Latitude and Longitude after Dropping the Pin

 I think the only problems I ran into was figuring out how to get the latitude and longitude after the pin was dragged and dropped. I could only figure out, from the documentation, how to obtain the positions of the marker as it was being dragged, but after it was dropped, I didn't get a returned value. I discovered the answer from a StackOverFlow post.

 

Comments

New Comment