Cibul Tech Blog - Fiddling with PHP, javascript and things

Geocode with Google Maps API v3

ShareThis

The purpose of this post is to show how to implement a simple address search tool with auto-completion using Google’s Google Maps API v3 with both client side geocoding and reverse geocoding.

The search menu will propose to search for addresses in two ways: the first will be direct address typing with suggestions for auto-completion and the second will finding addresses by dragging a marker on a map.

address field with autocomplete

See it working here

This is done in 5 steps:

  • create a page and download the jquery libraries
  • initialize a map, a geocoder and a marker
  • setup the jquery search widget to work with the geocoder to fetch suggestions and pin a marker down upon selection of a result
  • configure a listener to reverse geocode marker position when it is being dragged

Create a page

We start by creating a file structure which includes an index.html file, a css/ and a js/ folders. We need as well to go on the jquery website to download the autocomplete widget library as well as the base jquery library. We add a main.css file in the css folder to add some styling later on. Once this is done, edit the html file to include links to the js files, a div for the map, a search field and two fields for latitude and longitude:

<html>
  <head>
    <title>Geocoding with GMap v3</title>
    <link type="text/css" href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <label>Address: </label><input id="address"  type="text"/>
    <div id="map_canvas" style="width:300px; height:300px"></div><br/>
    <label>latitude: </label><input id="latitude" type="text"/><br/>
    <label>longitude: </label><input id="longitude" type="text"/>
  </body>
</html>

Initialize a map

In the js folder, we create a main.js file in which we will write all of our js code. We start with initializing a map, a geocoder and a marker:

var geocoder;
var map;
var marker;
   
function initialize(){
//MAP
  var latlng = new google.maps.LatLng(41.659,-4.714);
  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
       
  map = new google.maps.Map(document.getElementById("map_canvas"), options);
       
  //GEOCODER
  geocoder = new google.maps.Geocoder();
       
  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });
               
}

Instead of launching the initialize function in the onload statement of body, we can execute it once the jquery object is loaded. In main.js we add the statement:

$(document).ready(function() {
         
  initialize();
}

The page should be complete, with a working map and 3 empty fields.

Fetching auto-complete suggestions with the Geocoder

Geocode means figuring out a latitude and longitude pair from an address. We will let the geocoder do that work and we’ll use it to get the results and pin them on the map.

Now that the project is setup, in order to have a working auto-complete field for addresses we need to have two components working together: the jquery autocomplete widget and the google maps API geocode function. Everytime the user types in something in the search field, the autocomplete widget must use the geocoder to fetch a list of suggestions to display.

This is what the autocomplete method enables us to do. It can take quite a few options, but in our application we will only need two:

  1. source: it defines where the data displayed in the autocomplete list comes from (in our case, its the result of the geocoder)
  2. select: it defines what happens when the user selects a result of the list. Here we want it to display a marker on the map

All this comes right after the objects have been initialized:

$(document).ready(function() {
         
  initialize();
                 
  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
  });

Try it out. It works but its not too pretty… Add some style to the list box by adding this to the main.css file:

.ui-autocomplete {
    background-color: white;
    width: 300px;
    border: 1px solid #cfcfcf;
    list-style-type: none;
    padding-left: 0px;
}

Reverse Geocoding

This means figuring out the address from a latitude and longitude pair. What we want to do now is to execute a reverse geocoding call when the marker is being dragged on the map and update the address field. This works as well using the geocoder, only instead giving it an address we just give it a latitude longitude pair and it sends back an address if it finds any.

At the end of the js file, we add a on-drag behavior to the marker:

  google.maps.event.addListener(marker, 'drag', function() {
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
        }
      }
    });
  });

Drag and drop the marker and see what happens!

Tags: , ,

154 Responses to “Geocode with Google Maps API v3”

Zave June 2nd, 2010 @ 07:43

is there anyway to limit the auto-complete lookup to a specific country?

kaore June 3rd, 2010 @ 09:24

You can add the ‘region’ option to your geocoder options (using the country codes you find here (http://www.iana.org/assignments/language-subtag-registry). so the Geocode line would be something like: geocoder.geocode( {‘address’: request.term, ‘region’: ‘IS’ }, function(results, status) {…

Spout June 8th, 2010 @ 22:03

Thank you for this tutorial, I was switching from API v2 to v3 and this was very helpful and works fine.

Villalvilla August 27th, 2010 @ 23:29

Hi!
Wonderful article! But if you benefit of marvellous jqueryui… Why don’t you add their marvelous themes?
just adding:

(if you downloaded excite-bike theme with jquery ui), you won’t need the part of main.css of your article and would be much more fun!

Thanks indeed, because this is one of the best howtos I’ve read!

Webrunner September 11th, 2010 @ 12:35

Thanks for this tutorial, I was searching a simple way to complete latitude and longitude inputs through a gmap and send them to a geopoints table in a mysql database. I will use this today.

Greg September 15th, 2010 @ 23:01

Thank you for this simple and effective tutorial. Can you tell me what are the parameters to be adjusted to locate a point in “Editing mode” ? To explain, the parameters for locating a point with existing latitude and longitude, allowing a variation of it ?
Thanks !

kaore September 17th, 2010 @ 14:02

Thanks Greg. I’m not sure I understand what you mean by locating a point with existing lat&lon… Isn’t that the reverse geocoding described in the post?

Michel Poulain October 11th, 2010 @ 20:17

Thank you Kaore for this great tutorial. That was exactly what I was trying to code to geotag my photos. Using Exiftool and your script I was able to make a convenient html5 page to retrieve all info needed by Exiftool.

I had several goals for this page:
- retrieve geo-tags from an postal address
- retrieve elevation (thanks to Maps API V3)
- retrieve geographical information (thanks to Maps API V3)
- retrieve all above coming from an regular Google Maps url
- provide cut & paste info for Exiftools
- all marker positions are stored in anchors url (to be able to bookmark them)
- use Google services: Maps API, Google Code API, Font API
- make a valid html5 and jslint.com code

iPhone adds natively GPS info in its pictures. Looking for GPS info, when viewing iPhone photos from the Apple View application, leads to Google Maps url. From there, via an Javascript bookmark (manual in the html source code) I can go to my geocoding page. Then, thanks to my AppleScript and the cut & paste info for Exiftools, I can batch update Geotags in a bunch of photos with one drag and drop!

http://www.lashampoo.com/pages/geocoding.html

Techfanatic October 11th, 2010 @ 22:27

Hi, this is just beautiful! I hope this becomes the standard tutorial for Google because I would say I’ve read a lot and this is the only one that got me somewhere.

Our company has had a major lockdown of websites due to PCI compliance. However, part of the job of our associates is to validate addresses. Will the actual querying of this script be done on the client’s computer or the web server?

If it is done by the client computer, is there any way to make the querying done by the hosting server and return the results to the user?

Thank you!

Kaore October 11th, 2010 @ 23:20

Google provides an API also for server side Geocoding, although there are some limitations regarding the number of requests you can make per day for free. After that I guess you need to get a premium account. I suppose what you are looking for is here: http://code.google.com/apis/maps/documentation/geocoding/

Somnath Bhawat Lokhande October 27th, 2010 @ 15:12

Thank you for this great tutorial. but can you write this Article using Asp.net ?

Aruba October 27th, 2010 @ 15:55

Thank you for posting this helpful tutorial, the best and straight forward tutorial on the web. After reading and being able to put the peaces together and got it working as you describe I got an idea: being part of an enormous family from Africa, where my relatives are around the world;
My point is to save the longitude and latitude in a database such as mysql, that can give them the possibility to save their locations in it.
I followed the tutorial from google map V3, to implement the code at the marker onclik function but not being able.
My idea is that after the geocoding, once someone clicks on the marker an info window should open a pre filled form with the longitude and latitude geocoded and then save it in DB.
Your help will be appreciated!
You are great!!!!!!!!!!!!!

dana October 31st, 2010 @ 05:52

thanks! i need the short address (address level 3 to be exact) when the auto complete is selected:

Here is what you have now:

return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()

…I get the shortened address value when the marker is dropped/moved, but how do you get the shorter address value when the address is selected from the autocomplete?

I get this no problem when the marker is dropped…

shortAddress = results[2].formatted_address;

Mugs November 24th, 2010 @ 10:19

is there a way to add another marker which is non draggable

yum_yum November 24th, 2010 @ 13:52

Thanks a lot !

Michael November 27th, 2010 @ 15:39

A beautiful piece of work, Kaore … thank you very much.

Runar Kristiansen November 28th, 2010 @ 16:18

Thanks for a superb and easy-to-follow howto! Really made my day;)

anon December 4th, 2010 @ 20:23

it doesn’t work!? I did exactly the same. I’m not getting auto completion, or anything.

anon December 4th, 2010 @ 22:16

I don’t get why you guys are lying, his shit ain’t working, I’ve been trying to make it work for 5 hours now. And still nothing. Please someone tell me why? I did everything according to the tut. Either you guy’s are lying or I’m missing something.

anon December 4th, 2010 @ 22:35

scratch that, for some reason it works now Oo

tehk December 9th, 2010 @ 04:45

cheers m8…. this tutorial helped out a lot :)

Sauvaget December 28th, 2010 @ 21:37

Hello Kaore,

I am trying in vain to implement your example : please help !
Is there any API key to enter somewhere ? or maybe domain has to be declared to Google first ?
I used different releases of jquery (1.4.4 and ui: 1.8.7) : is there any impact ?

In my application, I just need the predictive address input : ie : user starts writing the adress which is auto-recognize and selected in the combo-box. May I keep only the autocomplete function ?

Thanks in advance for your help.

Arnaud

Sundar January 10th, 2011 @ 23:03

Hi –

I was wondering if it’s possible to integerate Maps v2 (instead of v3) with jQuery’s autocomplete feature. And instead of using the geocoding service after each keystroke, maybe use it after a certain delay in user typing the keywords. I would very much appreciate your response. Thanks, Sundar

gezzeg January 23rd, 2011 @ 11:59

Hi,
thanks a lot for great tutorial from you!

Sweety January 26th, 2011 @ 02:17

Hi Kaore,

Very nice work !
I try to limit the autocompletation for a specific country but, it doesn’t work.

I add the specific region here :
http://maps.google.fr/maps/api/js?sensor=false&language=fr&region=FR

and on this part of js :
geocoder.geocode( {‘address’: request.term,’region’: ‘FR’}, function(results, status) {

But nothing work :(

Poter cercare un indirizzo in google maps dalla nostra applicazione: semplicissimo con jQuery UI : Essemme February 21st, 2011 @ 03:37

[...] fare? Semplice: c’è un tutorial già fatto, chiaro e funzionante.  (Guarda la [...]

Nayden Dochev February 23rd, 2011 @ 22:24

Thanks,
I will definately use it for my site. You saved my day :)

mark March 15th, 2011 @ 21:39

I’m unable to get this working on a test site. I thought I’ve copied your instructions, any idea what I’m doing wrong? Also I’m totally new to this so it might be a really simple error.

http://wildkayakfishing.com/

is where I have my attempt at this.

Zubair Lawrence March 22nd, 2011 @ 05:25

Thank you so much for the post it way great! @ To restrict the location you need to
geocoder.geocode( {‘address’: request.term + ‘, us’ }, function(results, status) {

Mike George March 23rd, 2011 @ 11:37

Thanks for this, it was just what I was looking for and very clearly explained. :)

kaore March 25th, 2011 @ 20:41

@mark I guess you solved your problem, I checked your site and its working fine

UnLoCo March 30th, 2011 @ 13:24

thank you so much this is exactly what i neeed !!

Frizi April 9th, 2011 @ 02:26

1. Hi, is there any way to cancel submiting when hitting enter on the found location?
I’ve try to work it around with $(‘form’).submit(function() { return true; }); but this disabled the submit button. Any idea how to solve this?

2. What about clicking the values, i could slelect the suggested locations only via keyboard.

Thank you in advance.

rob April 9th, 2011 @ 12:53

That makes it all easy to follow, some of the “official” Google API documentation is hard to get to grips with – and doesn’t have much to say about jquery integration!

Could you use sensor=true to set the initial map view to the user’s current location?

Lloyd Phillips April 21st, 2011 @ 07:40

I can’t get the region to work. Copied in the code and tried various countries as specified in the link provided (and included the one in the comment) and it’s not working. :(

Can you confirm it’s working for you? Or can someone confirm they have it working?

Glorieux May 2nd, 2011 @ 13:46

Great Article Thanks a lot !

Andrea May 15th, 2011 @ 14:37

Just passing by to say thank you, the code is neat and the tutorial is perfect.

Robin Curtis May 17th, 2011 @ 10:48

I have followed the tutorial, i keep getting a missing } for the script when i run it. any ideas?

Luba May 19th, 2011 @ 12:54

Hi Kaore,

Nice tutorial!! I took it as a starting point and tried to add an infowindow.
So, in the “select” option of autocomplete I added this little piece of code after the definition of the marker

google.maps.event.addListener(marker, ‘click’, function() {
$(“#map_detail”).appendTo(“#map_canvas”);
var overviewOpts = { zoom: 18, center: marker.getPosition(), mapTypeId: google.maps.MapTypeId.SATELLITE, disableDefaultUI: true };
var detailMap = new google.maps.Map( document.getElementById(“map_detail”), overviewOpts );
var detailMarker = new google.maps.Marker({ position: marker.getPosition(), map: detailMap, clickable: false });
var infowindow = new google.maps.InfoWindow({ position: marker.getPosition(), content: document.getElementById(“map_detail”) });
infowindow.open(map, marker);
});

to open an infowindow with a detailed map.

Now the problem: When I click the marker, the infowindow opens with the correct content. If I close the infowindow and re-click the marker the infowindow does not open anymore !!
Any idea about that ??? Help please…

kaore May 21st, 2011 @ 00:13

Hi Luba,

I didn’t test your code but looking at it I see 2 problems:
1) You probably shouldn’t define your listener at the select. That would mean you’d add it each time you pick an address from the list. Declare it after the marker is created (in the initialize function)
2) From what I see, everytime you will click on the marker, you will append a new element (#map_detail which I guess you inserted in the html somewhere) to the canvas… x clicks mean x elements appended to the map canvas.. better create html elements once, then change their content instead of re-creating everything at each click.

Hemsida May 24th, 2011 @ 21:49

Great post
Thanks for sharing

JB June 3rd, 2011 @ 23:34

Hi,
Using JQuery, you also can use the gmap3 plugin.
There is an autocompletion example on http://gmap3.net/examples/address-lookup.html
JB

API V3 geocoding and reverse | bosyu dot com June 13th, 2011 @ 08:35

[...] この記事を読む カテゴリー: 未分類   パーマリンク ← [...]

Aditya June 20th, 2011 @ 23:56

Its not working i copied the whole code my autocomplete doesnt work

Jay June 22nd, 2011 @ 10:03

Good post but I would set up the reverse geocoding listener on the ‘dragend’ event instead of on ‘drag’. Otherwise, you are making several geocode calls while the drag is happening.

Vish June 25th, 2011 @ 13:05

Region not working for me either.

Dung June 27th, 2011 @ 20:20

So great !
Thank you very much

peter June 28th, 2011 @ 07:10

Hi, great code! I’m saving the Latitude, Longitude & Address to a database, and when I reload the map am trying to get it to show the marker straight away based on the saved database data (rather than having to re-enter an address) how do I do that?

thanks

Lyth June 28th, 2011 @ 07:31

Excellent Job! Thanksss Kaore!

Btw issit just me or google api autocomplete is unreadable?

Also, how can I highlight the select onkeydown(up, down, left, right) or mouseover?

Lyth June 28th, 2011 @ 09:01

Following up on the previous post, wanna highlight select, the example here works

http://gmap3.net/examples/address-lookup.html

But it requires downloading additional css & js. I usually prefer to do it from scratch to learn it the hard way ^___^;

Please help!!

BN July 2nd, 2011 @ 01:21

Very nicely done – Is there a way to incorporate Fusion Table polygon data to the rendered map?

PixelGrinch July 22nd, 2011 @ 22:00

In order to get the region filter to work properly:

instead of:

geocoder.geocode( {‘address’: request.term,’region’: ‘US’}, function(results, status) { …

use:

geocoder.geocode( {‘address’: request.term + ‘, US’ }, function(results, status) { …

Kree August 2nd, 2011 @ 12:20

Dear Kaore! It’s a great tutorial, i use it my route planning website. But I have a proglem: I expand the input fields, and I want use the autocomplete on them too. In Firebug i see that the new inputs have the autocomplete’s classes, but it doesn’t working… Can you help me?

Mossman August 11th, 2011 @ 19:08

Can this be used with Google Maps API V2?? Or would all V2 code have to be migrated to V3 in order for this to work?

Thanks

audioman August 12th, 2011 @ 14:33

Hi,

I am having trouble with getting this working, I would appreciate some assistance with editing the ‘main.js’. I copied what you said to do and replaced the execution statement as advised. I am currently getting no map and an error saying “Expected ‘)’”

Please help.

Thanks

===============================================================================

var geocoder;
var map;
var marker;

$(document).ready(function() {

initialize();

//MAP
var latlng = new google.maps.LatLng(41.659,-4.714);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map = new google.maps.Map(document.getElementById(“map_canvas”), options);

//GEOCODER
geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({
map: map,
draggable: true
});

}

Kaore August 12th, 2011 @ 17:21

@audioman: I guess if you add a ) in the end there it should help closing your ready function.

@Mossman: I haven’t tried this with V2. I see there is documentation on a geocoder in the v2 reference as well, so I suppose it should be possible.

denzel August 16th, 2011 @ 17:09

Can i customize the search of goole map. because I want it to find the locations in France only.

denzel August 16th, 2011 @ 17:54

i handle this, for example i want to display the locations in only france :

geocoder.geocode( {‘address’: request.term+”, fr” }, function(results, status) {…}

Matt Dyor August 17th, 2011 @ 06:15

Excellent post! What happens if you want to change the name of the field from address to ZZZ? I am trying to figure out what part of this tutorial is directed to the Google API and what part is directed to the form. I tried to replace the with , and I was not able to get this to work. For example, should

geocoder.geocode( {‘address’: request.term }, function(results, status) …

be changed to

geocoder.geocode( {‘place_address’: request.term }, function(results, status)

Thanks for any information!

Matt

Ignas Bernotas August 17th, 2011 @ 14:30

Wow, this is sweet. I was trying to implement google maps on my CMS and I was desperate about the search bar, but you just made my day. It works like a charm.

Thanks!

anusha August 25th, 2011 @ 15:06

wel great example…but when i m trying this example in local host ti is not displaying map…please give clear answer about this problem…

anusha August 25th, 2011 @ 15:10

i want to use google map in my website… i accessed this using API key and put into my website…but it is not locating address when i am entering place name in textbox..how to access geocode to my textbox..any ideas regarding this…thanks in advance.

Sonia August 30th, 2011 @ 10:37

This article is very helpful for me. But I have a query. How can I switch from v3 to v2.

Ashish August 30th, 2011 @ 13:59

1)Region Not Working

geocoder.geocode( {‘address’: request.term+ ‘, IN’ }, function(results, status) {

2)Autocomplete Suggestion are not same as coming on google map
I am not able to same set of auto complete suggestion as google showing on their site. What could be reason

xdesign September 9th, 2011 @ 04:25

Could anyone direct me on how to register new location by letting user enter their address and have it directly marques on the map?

MeM September 13th, 2011 @ 04:41

hey man, very thanks for the site.
I’m on two hours trying put google maps works with some libraries [nuget: gmap 3] in .net MVC with no sucess.

With your explanation it took me 30 minutes.

Thanks ;)

Oliver September 20th, 2011 @ 13:42

I have implemented this and had it working for the past three months, but as of today the marker does not appear until I either zoom in or out. I get the same result on your example. Is anyone else experiencing this? What’s changed?

Thanks
Oliver

Pete September 20th, 2011 @ 15:59

@Oliver
I am having the same problem.
It was working fine yesterday and today the marker doesn’t appear.
Maybe a change in the API?

chandu September 23rd, 2011 @ 14:36

hi
Im new for the java environment.how to write the code for 1km by 1km standared view from google map. & display the langitude , latitude valus

andre September 27th, 2011 @ 21:20

Try this for specific country:
geocoder.geocode( {‘address’: request.term + “, Indonesia”, ‘region’: ‘ID’ }, function(results, status) {

JOhn October 5th, 2011 @ 06:42

If you want only CITIES in the result:

if( $.inArray(‘locality’, item.types)>-1) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}

Manoj October 13th, 2011 @ 14:29

Hi

Can anybody send the files with supporting js.

Thanks in Advance!

Mark October 25th, 2011 @ 23:57

I’m hoping someone could help me out, i have implemented this into a two page form using POST to get the fields from the first form. Everything works great with the exception of the reverse geocoding. When i move the marker the fields dont update so im presuming the code isnt intializing. Anyone have any ideas ?

My js code is:

==================================================================

var geocoder;
var map;
var marker;

function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.659,-4.714);
var options = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById(“map_canvas”), options);
var address = document.getElementById(“address”).value;
geocoder.geocode( { ‘address’: address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: results[0].geometry.location
});

map.setZoom(18);

} else {
alert(“Geocode was not successful for the following reason: ” + status);
}
});

$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});

//Add listener to marker for reverse geocoding
google.maps.event.addListener(marker, ‘drag’, function() {
geocoder.geocode({‘latLng’: marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$(‘#address’).val(results[0].formatted_address);
$(‘#latitude’).val(marker.getPosition().lat());
$(‘#longitude’).val(marker.getPosition().lng());
}
}
});
});

}

Google Map server-side clustering with Asp.net « Software Programming November 5th, 2011 @ 20:50

[...] The search options is included by example code from Cibul Tech Blog. [...]

Load Individual KML Files for Wordpress/Buddypress Users November 12th, 2011 @ 09:22

[...] to load it’s own KML file. I was using Google’s javascript map API. I wanted to take this example, and apply it to an event form for the users of this site. So to do this, it meant I needed to send [...]

piksar November 28th, 2011 @ 21:25

it works great, thanks a lot!

newjumanji December 11th, 2011 @ 21:39

Thank you for this beautiful widget!!! :)

Pedro January 5th, 2012 @ 22:25

Freakin Awesome. Just one small prob:

Any chance of getting this script to work with /1.5.2/jquery.min.js instead of using jquery-1.4.2.min.jS ? Map does not load when I use version jquery 1.5.2, but all my other code relies on it.

Marcel January 9th, 2012 @ 07:14

thx so much, saved me a ton of time, so clearly explained.

Sailesh Jaiswal January 12th, 2012 @ 05:21

Thanks dude! It has really helped me a lot. I’m implementing it further with multiple markers and drawing polylines connecting them.

I hope, you could help me if have any problem…

Alex January 14th, 2012 @ 18:05

@Mark : do you finally find the error in your code ? I have tested it, the marker is draggable but both new position and new address don’t change …

Alex January 14th, 2012 @ 18:39

It actually works with this code for me :
var geocoder;
var map;
var marker;

function initialize(){
//MAP
var latlng = new google.maps.LatLng(41.659,-4.714);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map = new google.maps.Map(document.getElementById(“map_canvas”), options);

//GEOCODER
geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({
map: map,
draggable: true
});

$(function() {
$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
});
google.maps.event.addListener(marker, ‘drag’, function() {
geocoder.geocode({‘latLng’: marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$(‘#address’).val(results[0].formatted_address);
$(‘#latitude’).val(marker.getPosition().lat());
$(‘#longitude’).val(marker.getPosition().lng());
}
}
});
});
}
$(document).ready(function() {

initialize();
})

Ricardo January 25th, 2012 @ 19:41

Thank you a lot!

Arjun c c February 18th, 2012 @ 10:12

Thaks a lot. I was searching for this for days….

Yoda February 20th, 2012 @ 18:44

Great code, congrats!

Athena March 5th, 2012 @ 10:52

Thanks a lot, great contribution.

Olivier March 9th, 2012 @ 15:42

This is a GREAT tutorial.

Is it possible to limit the search to a country only? For example, only return the UK addresses?

Regards.

kaore March 9th, 2012 @ 15:53

Zubair Lawrence posted a comment addressing this I believe.

m1r0 March 12th, 2012 @ 00:31

Hm, I have a conflict with this code a Joomla site that I’m making. The reason is the Mootools framework. I tried with jQuery.noConflict() , but with no results. Can someone give me a hit how to make this happen? Thanks.

Olivier March 12th, 2012 @ 13:10

Thanks Kaore (and Zubair too).

I will paste it again.
To limit the search to one country (US in the example below):

geocoder.geocode( {‘address’: request.term + ‘, us’ }, function(results, status) {

LogoUsaha March 28th, 2012 @ 20:41

Thanks for sharing..
how to search data in database?

Skou April 3rd, 2012 @ 07:18

I would also like to know how to search in a database, at first – and if there’s no answer there then search as normal..

I know it’s probably some more complex coding, but if anyone could maybe just show me the way – then I’ll try to figure it out myself..

I also need it to show markers from my database within X distance from my search – have found this example: https://developers.google.com/maps/articles/phpsqlsearch_v3
Will try to implement it

I’m probably out where i can’t swim with this stuff, but i really need this system.. :)

Cakephp 2.0 Address Finder Helper : Essemme April 5th, 2012 @ 01:20

[...] is based on http://tech.cibul.net/geocode-with-google-maps-api-v3/, most of the credit goes to this script. The Helper encapsulates the client side funcionalities as [...]

Brandon Harris April 10th, 2012 @ 20:53

Excellent quick tutorial. Saved me about an hour of re-reading the documentation. Thank you.

xuxu April 18th, 2012 @ 13:07

Thanks for the tips :) .

Very useful for my project.

GG.

zohaib hossain April 22nd, 2012 @ 11:54

hi.. i am not getting the map and neither the suggestion is coming when i am putting this part:
$(document).ready(function() {

initialize();

$(function() {
$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
});

however i am getting the map when i am putting only this in place of above code:
$(document).ready(function() {

initialize();
}
i am using jquery-1.7.2.min and jquery-ui-1.8.19.custom.min
Where i am going wrong i don’t know. Is there anything that i am missing?

Attila Hooper April 30th, 2012 @ 14:43

For those having problems getting this working. I believe there is a missing closing bracket }); statement at the end.

My main.js appears as follows:

$(document).ready(function() {

initialize();

$(function() {
$(“#address”).autocomplete({
.
.
.
****more code here*****
.
.
.
$(‘#longitude’).val(marker.getPosition().lng());
}
}
});
});

Attila Hooper April 30th, 2012 @ 14:44

^^the above ^^^^
and one more closing bracket statement

});

Mark April 30th, 2012 @ 23:14

@m1r0 I’m having the same issue, I need to run this on a Joomla website and have to run it in jQuery.noConflict(); mode. This causes the address lookup function to not work. Anyone have any suggestions on how to get this working with jQuery.noConflict(); enabled?

Chris May 27th, 2012 @ 19:00

Hi, I’m not sure whether this will help anyone, but here is my completed script which works.

main.js

// JavaScript Document
var geocoder;
var map;
var marker;

function initialize(){

var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246, -4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};

map = new google.maps.Map(document.getElementById(‘map’), myOptions);

geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({

map: map,
draggable: true

});

}
$(document).ready(function() {

initialize();

$(function() {
$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#osgb36lat”).val(ui.item.latitude);
$(“#osgb36lon”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setZoom(16);
map.setCenter(location);

}
});
});

google.maps.event.addListener(marker, ‘drag’, function() {
geocoder.geocode({‘latLng’: marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$(‘#address’).val(results[0].formatted_address);
$(‘#osgb36lat’).val(marker.getPosition().lat());
$(‘#osgb36lon’).val(marker.getPosition().lng());
}
}
});
});
})

With this I’m using ‘jquery-ui-1.8.20.custom.min.js’ and ‘jquery-1.7.2.min.js’

Hope this helps

Kind regards

SJL May 29th, 2012 @ 19:34

I couldn’t get it to work even after copy-pasting. I ended up downloading the main.js from the working demo out of frustration, and it worked perfectly.

Dj@lma Blog – Geocode with Google Maps API v3 July 4th, 2012 @ 17:40

[...] Comments Geocode with Google Maps API v3. /* Tags: [...]

Bastien August 10th, 2012 @ 21:48

Man, this is terrific ! Great, thanks a lot !

jonbravo27 September 13th, 2012 @ 21:00

HELP!

First off, this awesome!

I’m curious if there is a way to capture the resulting lat/long and address information from the draggable point into php variables so I can post a chosen location to a mysql database?

Convert geocode results into php variables to post to mysql database | appsgoogleplus.com September 13th, 2012 @ 23:03

[...] have used the tutorial here http://tech.cibul.net/geocode-with-google-maps-api-v3/ to create a page with map and draggable marker to display address and [...]

cedar finance option October 1st, 2012 @ 14:01

naturally like your web-site however you need to test the
spelling on several of your posts. A number of them are rife
with spelling issues and I find it very bothersome to tell
the reality on the other hand I’ll certainly come again again.

Peter October 13th, 2012 @ 18:12

Hi!

It works like charm, but i wanted to put it into a html form so i can access the autocompleted address, but the autocomplete won’t work if the inputText is inside a tag. Do you have any idiea why that occurs?

JSF and google maps autocomplete | appsgoogleplus.com October 14th, 2012 @ 04:34

[...] gives it’s address the application would offer possibilites from google maps. I found a good tutorial. Itseemed to work like charm but when i put the inputText tag into a from so i can save it’s [...]

Mike November 4th, 2012 @ 11:11

A few things…
1) Awesome script!
2) If you’re limiting autocomplete results to a specific country, watch that the ` is actually a ‘ (ex: ‘US’)
3) To save the results, you can add tags around the latitude and longitude text boxes, and add a submit box

Mike November 6th, 2012 @ 05:04

An excellent script but a couple of things to improve upon if you could :)

- When dragging the marker it seems the latitude and longitude won’t always update unless a new address results. For example if you drag the marker 1/8 of an inch but not to a new address, the GPS data doesn’t always update. Try dragging the marker back and forth and you’ll find sometimes it just locks the old GPS coordinates and doesn’t display the dragend results. In comparison I have another script where this works perfectly, updating the GPS data and addresses no matter how much (or little) you drag. Unfortunately I can’t seem to merge the two scripts.

- Highlighting the choice when you scroll through the autocomplete results so you know which one will be selected.

For those who want to save the data to a database, here is the code in ASP (not PHP and not ASP.net) Some extra code added, mainly to make sure the GPS coordinates are valid as this code also allows you to input the GPS coords manually (should the address lookup not work).

The code will then save the: address, latitude, longitude and location name to a database. Also prevents SQL injection.

1 then session(“addyf”) = addy

vlat = request.form(“lat”)
vlong = request.form(“long”)

if NOT isnumeric (vlat) then ermsg = ermsg & “- Latitude is not numeric”
if NOT isnumeric (vlong) then ermsg = ermsg & “- Longitude is not numeric”

‘ === errors found ===

if ermsg “” then
response.write “Errors Occured:” & ermsg
end if

if ermsg = “” then

‘ if no address found, give it a name anyway so it isn’t null
if len(addy)

Address: <input type=text size=50 id="address" class="black" name="addy" value="”>

Latitude:
Longitude:

Mike November 12th, 2012 @ 14:04

If you want the gos coords to update constantly (as they should) instead of just when a new address is found during the drag, change the code around:

//Add listener to marker for reverse geocoding
google.maps.event.addListener(marker, ‘drag’, function() {
geocoder.geocode({‘latLng’: marker.getPosition()}, function(results, status) {
$(‘#latitude’).val(marker.getPosition().lat());
$(‘#longitude’).val(marker.getPosition().lng());
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$(‘#address’).val(results[0].formatted_address);

Bill January 12th, 2013 @ 09:28

Hello everyone

is it too hard for a person to understand Geocoding if he don’t know any Javascript, I try to insert a very simple map on my website, I got API key v3, and copy the code from website, unfortunately the code of map is for key v2, it says my key is invalid, I try to use hello world but don’t know why the header part of v2, and v3 are very different, it make me confused where to insert v3 map, is there anyone out there could help me. thank you.

KaNuNSuZ_oFLu January 13th, 2013 @ 04:55

doesn’t work :(

Mart January 16th, 2013 @ 08:53

Great work!!! thanks ^^

Undertec Blog April 2nd, 2013 @ 09:39

Google Maps: Geografische Koordinaten bestimmen…

Wer aus Google Maps geografische Koordinaten wie Längen- und Breitengrade wie aus normalen Karten ermitteln möchte, der kann “Google Maps API Example: Simple Geocoding” verwenden. Dabei kann man wie die untenstehende Beispiel zeigen, alles mögliche d…

Luis Kosman May 13th, 2013 @ 03:45

Google has decided that its users of their well-liked Google Maps service will begin becoming charged a fee for utilizing their service. Websites that are going embedding a Google Map of their location will be charged a fee for usage.This new Google Maps fee is going to hit mostly the bigger companies, particularly the Travel industry. I suspect that certain websites that are the heaviest users would be websites like TripAdvisor and Expedia.*;

See you later
http://homeimprovementstuffs.com

Rick May 30th, 2013 @ 06:06

This is brilliant! Thanks a million! The best I have found.. and I have been looking for a while!

kredyty.twoja-emerytura.pl June 15th, 2013 @ 03:44

What’s Going down i’m new to this, I stumbled upon this I’ve discovered It positively helpful and it has helped me out loads. I’m hoping
to give a contribution & aid different users like its
helped me. Great job.

Also visit my homepage … kredyty.twoja-emerytura.pl

Ceyhun July 17th, 2013 @ 10:04

Thanks veryy much. You helped me about a task which I was tring to solve a month.

yash September 12th, 2013 @ 15:46

dear sir pls help me i want to latitude and langitude value run url on mobile site or noraml browser without pass address value in asp.net

kitchenrenovation71.jimdo.com November 7th, 2013 @ 13:30

You are so cool! I don’t think I’ve truly read something like that before.
So good to find another person with some genuine thoughts on this subject
matter. Really.. many thanks for starting this up.

This web site is one thing that is required on the internet, someone with a little
originality!

My web-site: kitchen decorating themes (kitchenrenovation71.jimdo.com)

interior kitchen designs November 30th, 2013 @ 09:26

It’s an awesome piece of writing in favor of all the web viewers; they will take advantage from it I am sure.

Here is my blog post – interior kitchen designs

http://blog.uin-malang.ac.id December 24th, 2013 @ 14:34

I think the admin of this web site is genuinely working
hard in support of his website, since here every
stuff is quality based information.

Rk January 17th, 2014 @ 21:13

nice1.

I found an example to geocode an address and zip code in google maps using java script, please visit http://www.etechpulse.com/2013/09/how-to-geocode-address-or-zip-code.html

bespoke kitchens January 30th, 2014 @ 07:29

You have made some decent points there. I checked on the
web for more information about the issue and found most individuals will go along
with your views on this website.

Feel free to visit my website bespoke kitchens

massage tips rug February 9th, 2014 @ 15:40

Wonderful goods from you, man. I have understand your stuff
previous to and you are just extremely wonderful. I actually like
what you’ve acquired here, really like what you are stating and the way in which
you say it. You make it entertaining and you still care for to
keep it smart. I can not wait to read far more from you.
This is actually a wonderful website.

mimosa21 March 7th, 2014 @ 07:55

Bonjour,

Comment peut-on faire pour récupérer la ville, le code postal, le département et la région ?

En tout cas très bon tuto!

Waylon March 8th, 2014 @ 11:55

Its such as you read my mind! You appear to grasp so much about this, such as you wrote the e-book in it or something.
I believe that you can do with some percent
to power the message home a bit, however instead of that, this is
magnificent blog. An excellent read. I’ll certainly be back.

dragoncityhacktoolfr.blogspot.com March 9th, 2014 @ 06:57

It’s aƿprοpriate time to make somе plans for the
future aոd it is time to be happy. I have read this
post ɑnd if I could I desire too suggest you some interesting things or tips.
Perhaps you could wrte next articles referring to this article.
I want to read morе things ɑbokut it!

article submission tools March 13th, 2014 @ 21:00

Hello, i feel that i noticed you visited my web site so i got here
to go back the want?.I’m attempting to find things to enhance my web site!I assume its adequate to use some
of your concepts!!

Juliana March 17th, 2014 @ 15:34

My coder is trying to convince me to move to .net from PHP.
I have always disliked the idea because of the costs. But he’s tryiong none the less.
I’ve been using WordPress on several websites for about a year and am nervous about
switching to another platform. I have heard excellent things about blogengine.net.
Is there a way I can import all my wordpress content into
it? Any help would be greatly appreciated!

http://tasknets.com April 7th, 2014 @ 04:22

Swiping to the aptly, in lieu of command, enables a futuristic zipline tool in lieu of surreptitiously dropping into extra locations – mirroring the gesture equips an energy defend and swiping up produced a whirr.
My Fox NY asks if traditional nintendo wii have
a very devote the long term using the cloud in your mind.
Hello again and welcome to another edition of Great Video Game Ideas Not
Used.

best dj software April 9th, 2014 @ 08:42

When someone writes an paragraph he/she keeps the image of a
user in his/her mind that how a user can know it. Thus
that’s why this piece of writing is great. Thanks!

Take a look at my web page: best dj software

Manuj April 13th, 2014 @ 18:15

Hi

There is a restriction on the number of Requests which can be sent for Google API. Does that hold for the example that you have posted above?

google plus account login April 20th, 2014 @ 23:57

Useful info. Lucky me I found your site accidentally,
and I’m shocked why this twist of fate did not came about in advance!

I bookmarked it.

gameplay April 22nd, 2014 @ 04:28

Way cool! Some very valid points! I appreciate you penning this article
and the rest of the website is also really good.

Gabriela May 5th, 2014 @ 02:49

want to affiliate physical products, then you’d want to
probably work with Amazon or. Using specific keywords heightens your
search engine ranking for applicable searches. Regularly improve and update your products to enable you build a solid connection with your customers.

my blog post – Tube Digger Pro (Gabriela)

stainless steel apron sink May 7th, 2014 @ 23:33

Hello! I know this is somewhat off topic but I was wondering which blog platform are you using for
this site? I’m getting sick and tired of WordPress because
I’ve had issues with hackers and I’m looking at alternatives for another platform.
I would be fantastic if you could point me in the
direction of a good platform.

My web site stainless steel apron sink

massage duluth mn May 8th, 2014 @ 08:29

I couldn’t refrain from commenting. Very well
written!

Earbuds for running May 17th, 2014 @ 04:01

- After it’s plugged in, open up i – Tunes aand highlight your i
- Phone on the sidebar. Overall, I will takme
good care of these headphones. Music gives you peace,it takes your tensions away and gives you a perfect pastime, which you enjoy and
get involved in.

http://www.Intrinsiqmaterials.net/ May 27th, 2014 @ 12:59

Hey there would you mind letting me know which web host you’re working with?
I’ve loaded your blog in 3 completely different browsers and I must say this blog loads
a lot faster then most. Can you suggest a good web hosting provider at a reasonable
price? Thank you, I appreciate it!

Ocean Rowing May 27th, 2014 @ 15:25

It’s an amazing post designed for all the internet visitors; they will obtain benefit from it I am sure.

www May 31st, 2014 @ 10:55

We’re a bunch of volunteers and opening a brand new scheme in our community.
Your site offered us with useful information to work on. You have
performed an impressive job and our entire group will probably be thankful to you.

is a dui a criminal Offense in Brookline June 2nd, 2014 @ 22:37

Unquestionably believe that which you stated. Your favorite justification appeared to be on the
internet the easiest thing to be aware of. I say to you, I certainly get
annoyed while people consider worries that
they plainly don’t know about. You managed to hit the nail upon the top and defined out the whole thing without
having side effect , people could take a signal. Will probably be
back to get more. Thanks

Look into my weblog; is a dui a criminal Offense in Brookline

a June 4th, 2014 @ 21:34

I love your blog.. very nice colors & theme. Did you design this
website yourself or did you hire someone to do it for you?
Plz respond as I’m looking to construct my own blog and would like to know where u got this from.
thanks a lot

Pakar SEO Indonesia June 16th, 2014 @ 13:58

This page truly has all the information I needed about this subject
and didn’t know who to ask.

abortiveinsomni19.newsvine.com June 18th, 2014 @ 18:54

Hi! I’ve been following your website for a long
time now and finally got the bravery to go ahead and give
you a shout out from Kingwood Texas! Just wanted to say keep
up the fantastic job!

Review my webpage :: abortiveinsomni19.newsvine.com

a June 19th, 2014 @ 13:10

I think that is one of the such a lot significant info
for me. And i’m happy studying your article.
But should observation on some common things, The web site taste is wonderful,
the articles is truly great : D. Good task, cheers

Christopher July 14th, 2014 @ 04:21

It does work, here is the complete inline code:

Geocoding with GMap v3

var geocoder;
var map;
var marker;

function initialize(){
//MAP
var latlng = new google.maps.LatLng(41.659,-4.714);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map = new google.maps.Map(document.getElementById(“map_canvas”), options);

//GEOCODER
geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({
map: map,
draggable: true
});

}

$(document).ready(function() {
initialize();

$(function() {
$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
});

});

.ui-autocomplete {
background-color: white;
width: 300px;
border: 1px solid #cfcfcf;
list-style-type: none;
padding-left: 0px;
}

Address:

latitude:
longitude:

Christopher July 14th, 2014 @ 04:21

It does work, here is the inline code for a copy paste demo:

Geocoding with GMap v3

var geocoder;
var map;
var marker;

function initialize(){
//MAP
var latlng = new google.maps.LatLng(41.659,-4.714);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map = new google.maps.Map(document.getElementById(“map_canvas”), options);

//GEOCODER
geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({
map: map,
draggable: true
});

}

$(document).ready(function() {
initialize();

$(function() {
$(“#address”).autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {‘address’: request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$(“#latitude”).val(ui.item.latitude);
$(“#longitude”).val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
});

});

.ui-autocomplete {
background-color: white;
width: 300px;
border: 1px solid #cfcfcf;
list-style-type: none;
padding-left: 0px;
}

Address:

latitude:
longitude:

Joseph Patrick Pantel September 25th, 2014 @ 05:21

Joseph Patrick Pantel…

Geocode with Google Maps API v3…

Leave a Reply


RSS 2.0You can follow any responses to this entry through You can leave a response, ou trackback from your own site.