Skip to content

Instantly share code, notes, and snippets.

@kerie
Created Jul 2, 2012
Embed
What would you like to do?
A sample use of google map api
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var bounds = new google.maps.LatLngBounds();
var node = document.getElementById("searched_marks");
if(node!==null) {document.body.removeChild(node);}
node = document.getElementById("added_marks");
if(node!==null) {document.body.removeChild(node);}
//var btn = document.getElementById("add_mark");
//btn.removeAttribute('disabled');
var newNode = document.createElement("p");
newNode.setAttribute('id', 'searched_marks');
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
for(var i=0; i<results.length; i++) {
var addr = results[i].formatted_address + "<br />lat = " + results[i].geometry.location.lat()+ " lng = " + results[i].geometry.location.lng() + "<br /><br />";
createMarker(results[i].geometry.location, results[i].formatted_address, addr);
bounds.extend(results[i].geometry.location);
newNode.innerHTML += addr;
}
map.fitBounds(bounds);
document.body.appendChild(newNode);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function toggleBounce(marker) {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
function addInfo(marker) {
var newNode = document.getElementById("added_marks");
if(!newNode) {
newNode = document.createElement("div");
newNode.setAttribute('id', 'added_marks');
}
var childNode = document.getElementById('added_marks' + marker.__gm_id);
if(!childNode) {
childNode = document.createElement("p");
childNode.setAttribute('id', 'added_marks' + marker.__gm_id);
}
newNode.appendChild(childNode);
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[1]) {
var addr = results[1].formatted_address + "<br />lat = " + marker.getPosition().lat() + " lng = " + marker.getPosition().lng();
infowindow.setContent(addr);
infowindow.open(map, marker);
childNode.innerHTML = "<hr/>" + addr;
document.body.appendChild(newNode);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function createMarker(position, title, html) {
var marker = new google.maps.Marker({
map: map,
position: position,
title: title
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function addMark() {
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: map.center,
title: 'drag me!'
});
listenerMaker(marker);
}
function listenerMaker(marker) {
google.maps.event.addListener(marker, 'click', function() { return toggleBounce(marker); });
google.maps.event.addListener(marker, 'dragend', function() { return addInfo(marker); });
}
</script>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
<button id="add_mark" onclick="addMark()" type="button">add mark</button>
<div id="map_canvas" style="width: 480px; height: 480px;"></div>
</body>
</head>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment