Geocode not appearing - google-maps-api-3

Below is the javascript for my Geocode. My map will not appear, and I cannot seem to find my error. Please advise.
I'm trying to show the "true" value of the actual location. API was generated appropriately on Google's developers website.
<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
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function codeAddress() {
var address = document.get.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);
}
});
}
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=drawing&sensor=true"></script>

You have at least 3 javascript errors which will cause issues:
javascript is case sensitive:
Center is not the same as center
Latlng is not the same as LatLng
there is a missing comma after "Center: latlng" in the mapOptions
this is incorrect (extra ".get"):
var address = document.get.getElementById('address').value;
should be:
var address = document.getElementById('address').value;
And as Jimmie Johansson observed, there is no call to initialize (or for that matter codeAddress)
working example

Do you run initialize() anywhere? Without that your map won't show up.

Related

Geocode was not successful for the following reason: REQUEST_DENIED in the Google Map Integration

We have integrated google location map in our wordpress website, but now when I load that page it is showing error
Geocode was not successful for the following reason: REQUEST_DENIED
When the map it is showing faded color map, For development purpose only.
My code is showing below.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript"> var geocoder, map; function mapInit(address) { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map'), mapOptions); codeAddress(address); } 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);
} }); } $(function(){ mapInit($('.current-contact .address b').html());
$('.location').click(function() {
var $this = $(this),
currentAddr = $('.current-contact').html(),
nextAddr = $this.html(),
address = $this.find('.address b').html();
codeAddress(address);
$('.current-contact').html(nextAddr);
//$this.html(currentAddr); }); });
</script>
When I get the api code, what are the changes that I need to make in this script?

javascript geocoding from address to latitude,longitude

I m using google maps api v3. This is my code
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=places"></script>
<script>
var geocoder;
var map;
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);
var mapOptions = {
zoom: 15,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function codeAddress() {
var address = document.getElementById('searchTextField').value;
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert(latitude);
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);
}
});
}
</script>
I m doing all this in wordpress template file. I m displaying suggestion using autocmplete places. I want that when user select one of the location from suggestion list, map should navigate to that place. It's not going into the if condition i.e. if (status == google.maps.GeocoderStatus.OK) {
This is html code
<input id="searchTextField" type="textbox">
<input type="button" value="Geocode" onclick="codeAddress()">
If you run this code you will see you have an error that says:
InvalidValueError: unknown property searchTextField
Geocoder accepts 'address' as a property among others, but no 'searchTextField'.
So just change:
geocoder.geocode( { 'searchTextField': address}, function(results, status) {
to:
geocoder.geocode( { 'address': address}, function(results, status) {

Search for Hospitals and Clinics near a particular zip code

I would like to know a method to search for hospitals or clinics within a particular radius around a pin code. How do I go about this and integrate it into my website? I would be using google maps api for the first time so please try and use simple terms.
Okay so I manage to do this much
<script type="text/javascript">
var map;
var infowindow;
var geocoder;
var lat;
var lng;
var custom;
function initialize() {
geocoder = new google.maps.Geocoder();
var address = "Mumbai 400004";
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
custom = new google.maps.LatLng(lat, lng);
map.setCenter(custom);
}
});
var mapOptions = {
zoom: 12,
center: custom,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var request = {
location: custom,
radius: 500,
types: ['hospital']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
the problem now is that markers for hospitals are not showing on the map. What mistake have I made here ? Thank you for your help.

API v3: Issue with GeoCoding service in Firefox 6.0 / IE 9.0

I have created a code to add multiple markers and infoWindows using the GeoCoding service. I have copied the method from API v3 Docs. My script pulls address information from a ASP.Net web service and writes them onto a hidden div element.
function codeAddress(address)
{
//Get the location information from address
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//Add a google marker onto the given address
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location
});
//Prepare a infoWindow to display complete address
var faddress = "<h4>Office Address:</h4><span>" + address + "</span>";
var infowindow = new google.maps.InfoWindow({content: faddress});
//Opening information window on mouseover event of marker
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow.open(map, marker);
});
//closing the info window when mouse is moved out of marker
google.maps.event.addListener(marker, 'mouseout', function(){
infowindow.close();
});
}
});
}
Next piece of code reads the address from hidden div elements and adds the marker along with InfoWindows. This code works perfectly with Internet Explorer 7.0/8.0.
//Populate the result onto div element
$.each(arr,function(index, item){
$(".result").append("<div class='block'>" + item + "</div>");
});
//Loop through the div element and add marker to map
$(".block").each(function(){
codeAddress($(this).text());
})
But the same code is not working when i open it on Firefox 6.0/IE 9.0.
GeoCoding service returns ZERO_RESULTS for the same call. When I call the method 5 times with same address it is able to add markers.
Any idea if geoCoding service has issues with new browsers ?
Thanks in Advance...
Sudhir
this is the code im using to generate maps, you can take it and adjust it to your needs:
var address = document.getElementsByTagName('address')[0].innerHTML;
var title = document.getElementById('contact').getElementsByTagName('h2')[0].innerHTML;
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 15,
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,
title: title
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});

Google Maps API geocode function problem

Ok, I'm fooling around with Google Maps API v3 and I bumped into a problem. I don't know if its the API or just some JS error i made.
Problem:
addMarkerFromAdress() function calls on geocodeFromAdress() which returns coordinates back to addMarkerFromAdress(). But returned value is "undefined".
As a debug i added two alert outputs, one in addMarkerFromAdress() and one in geocodeFromAdress(). What troubles me is that the alert() in addMarkerFromAdress() seems to fire off before any value is returned. Why?
Source:
<script type="text/javascript">
var geocoder;
var map;
function initializeGoogleMaps() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function geocodeFromAdress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
alert(latLng); //Outputs coordinates, but is for some reason outputted 2nd
return latLng;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function addMarkerFromAdress(address, title){
var latLng = geocodeFromAdress(address);
alert(latLng); //Outputs "undefined", but is for some reason outputted 1st
map.setCenter(latLng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
}
window.onload = function () {
initializeGoogleMaps();
addMarkerFromAdress('Berlin, Germany', 'Berlin');
}
</script>
See that function passed as the second argument to geocoder.geocode()? that is where you should be calling addMarkerFromAddress. Due to the asynchronous nature of the geocode request, the alert after var latLng = geocodeFromAdress(address); is firing before the response is returned with the lat long values.
Something like this should do it
<script type="text/javascript">
var geocoder;
var map;
function initializeGoogleMaps() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function geocodeFromAdress(address, title) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
addMarkerFromAdress(latLng, title);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function addMarkerFromAdress(latLng, title){
map.setCenter(latLng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
}
window.onload = function () {
initializeGoogleMaps();
geocodeFromAdress('Berlin, Germany', 'Berlin');
}
</script>

Resources