Skip to content

Instantly share code, notes, and snippets.

@lazarofl

lazarofl/geocoder_example.html

Created October 16, 2012 18:27
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save lazarofl/3901081 to your computer and use it in GitHub Desktop.
Save lazarofl/3901081 to your computer and use it in GitHub Desktop.
Download ZIP
Google Maps V3 - Geocoder example
Raw
geocoder_example.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
var map;
var mapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
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);
if(marker)
marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true
});
google.maps.event.addListener(marker, "dragend", function() {
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();
});
document.getElementById('lat').value = marker.getPosition().lat();
document.getElementById('lng').value = marker.getPosition().lng();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" style="width:60%" value="rua tabapuã - vila olimpia - são paulo">
<input type="button" value="Geocode" onclick="codeAddress()">
<input type="text" id="lat"/>
<input type="text" id="lng"/>
</div>
<div id="map_canvas" style="height:60%;top:30px"></div>
</body>
</html>
@Chizenbop
Copy link

On line 50 you have defined
body onload="initialize()"
which causes initialize() to run twice.

@ConfusedRunningGuy
Copy link

Actually no Initialize() isn't run twice onload, codeAddress() is run twice on the apps lifecycle. Once onload and once on a button click event, which appears fine

@neeraj87
Copy link 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=my_api_key"></script>
<script type="text/javascript">
$(document).ready(function(){
    console.log('Doc on load');
    var address = 'San Diego, CA';
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({'address': address}, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            if(status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                initialize(latitude, longitude);
            } else {
              alert("No results found");
            }
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    function initialize(latitude, longitude) {
        var latlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        };

        var map = new google.maps.Map(document.getElementById('map'), myOptions);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Location, property name'
        });
    }
});
</script>
<div id="map"></div>

This is my code for geocoder. However it does not show any map. It neither gives me any javascript errors. What am I doing wrong?

@ReenaVerma
Copy link

like wise, no map is appearing for me neither..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment