im new to google maps api and have done the geocoding example at:
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
I want to be able to geocode a string within my code and place a marker at the location, rather than a user search a location. my code so far is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
//global variables
var geocoder;
var map;
var Ireland = "Dublin";
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(53.3496, -6.3263);
var mapOptions =
{
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();//call the function
}
function codeAddress()
{
var address = document.getElementById("Ireland").value;
geocoder.geocode( {"Ireland":address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);//center the map over the result
//place a marker at the location
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
It's probably something simple but as i said im new to google maps and html and would love any help at all so please dont vote down. Thanks
This will change the codeAddress function to take an argument and geocode that argument. If you pass the Ireland variable as the argument it will geocode "Dublin".
var Ireland = "Dublin";
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(53.3496, -6.3263);
var mapOptions =
{
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress(Ireland);//call the function
}
function codeAddress(address)
{
geocoder.geocode( {address:address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);//center the map over the result
//place a marker at the location
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Just Try with this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Map Address</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var address = "Dublin";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
initialize(latitude,longitude);
}
});
function initialize(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"location : Dublin"
});
}
</script>
</head>
<body>
<h2>Google Map Address</h2>
<div id="map_canvas" style="width:710px; height:300px"></div>
</body>
</html>
来源:https://stackoverflow.com/questions/21411358/google-maps-geocoding-a-string