I have been looking at an example of geocoding on the Google maps dev website. I found this example and would like to as an experiment hard code a postal code instead of using the input box to get the address (the overall aim is to have an xml place the postal address inside here). Is it just a case of hard coding the postal address inside of the 'address' tags? I did try this but to no joy. Hope that makes sense?
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
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);
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="panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
If I understood well, you can try like this:
http://jsfiddle.net/7g7qG/
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress('London')
}
function codeAddress(address) {
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,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
How do I make a simple map in Jquery that plots only one location. Here is the code I have now. this plots an array of locations, but I just need a simple map that will plot one point in Lng,Lat format. I am using the google geocoder for this.
var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow = new google.maps.InfoWindow({
content: ''
});
function initialize() {
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode({
'address': '5th Avenus New Yort'
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bounds.extend(results[0].geometry.location);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
plotMarkers();
}
var locationsArray = [
['Google Official', '1600 Amphitheatre Parkway, Mountain View, USA'],
['Google 1', '112 S. Main St., Ann Arbor, USA'],
['Google 2', '10 10th Street NE, Suite 600 USA']
];
function plotMarkers() {
var i;
for (i = 0; i < locationsArray.length; i++) {
codeAddresses(locationsArray[i]);
}
}
function codeAddresses(address) {
geocoder.geocode({
'address': address[1]
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(address[0]);
infowindow.open(map, this);
});
bounds.extend(results[0].geometry.location);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I then call this in my file with:
<body>
<div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>
</html>
I need the new map to plot one lat and lng point along with posting the listing the location in the textbook as above. I can not figure out how to do this without an array.
It seems like you're using an example that shows multiple markers.
I haven't tested it, but I think this JavaScript is close:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
geocoder.geocode( { 'address': '5th Avenue New York' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.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);
Review this for more information: https://developers.google.com/maps/documentation/javascript/geocoding
I was roaming on this site for any info on geocoding a marker. However, I have tried some of the answers but I did not manage to make it work (I am an amateur when it comes to coding), so could someone please help me with the geocoding of my marker? Apparantly, the marker is missing when using this code. I need to geocode postcode in this case, which is the zip code 1058JA. Thanks in advance!
var geocoder;
var map;
var Postcode;
Postcode = '1058JA';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.368465, 4.903921);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function codeAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': document.getElementById("address").value },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
Postcode = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"),
{
center: Postcode,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position:results[0].geometry.location,
});
marker.setMap(map);
}
else {
document.getElementById("address").value = status;
}
}
);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
There are a few things wrong with your code.
1) codeAddress is never called (as Anto Jurković notes).
2) A new instance of map is created within codeAddress if it were ever called which is redundant.
3) While you've specified Postcode as a string at the top of the code, the geocoder is looking for the value of a input element instead.
Your code should something like this:
var geocoder;
var map;
var Postcode;
Postcode = '1058JA';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.368465, 4.903921);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': Postcode }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
});
marker.setMap(map);
} else {
document.getElementById("address").value = status;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo
I have used the following code to display the marker on the location I have dynamically searched for(code). Now I want to highlight the searched location boundary. (For instance, if I search 'Tokyo', it should mark the boundary of 'Tokyo'(chk the image for reference).
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
$('#noResults').html("Unsuccessful:" + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Daer All I have set Google Maps in my project and work fine. Now I would like to initialize the following script with "Street View Panorama" instead of stardard map.
I have found an exemple on google developers but I'm not able to combinate it with the geocoding function.
So what if I would like to initialize street view instead of standard map in this code?
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}//*I need street view instead of standard map (StreetViewPanorama)
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
html
<div id="map-canvas" style="width: 600px; height: 450px; float:right"></div>
<div>
<input id="address" type="text" value="Milan, Italy Viale Tunisia 30">
</div>
I have an element on my page which I have assigned the ID 'address' to:
<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
Now I am trying to create a Google map from it using the following:
<script type="text/javascript">
var gecoder, map;
var address = document.getElementById('address').innerHTML;
function googlemap(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 8,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
</script>
However this returns nothing. I get a blank. Any idea what i am doing wrong?
This is what I did and it works. JavaScript in the head:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" />
<script type="text/javascript">
var geocoder, map;
function googlemap() {
var address = document.getElementById('address').innerHTML;
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myPosition = results[0].geometry.location;
alert(myPosition);
var myOptions = {
zoom: 8,
center: myPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: myPosition
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
The body:
<body onload="googlemap()">
<form id="form1" runat="server">
<div>
<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
<div id="map" style="overflow:hidden; width:400px; height:400px"></div>
</div>
</form>