Google Maps API cannot process one specific address - google-maps

We have a working Google Maps API (V2) module working correctly on our custom made CMS.
I cannot figure out why but this code seems to be having troubles processing one specific Address. What's weird is that the address can be found normally on Google Maps.
Here are two examples, one address that works perfectly and the address that Google Maps API cannot find :
Working Address : via Zups 2, 7013 Domat/Ems
<script>
initialize( "googlemap-viazups17013domat/ems", "via Zups 2 7013 Domat/Ems" )Marly" )
</script>
working HTML output (cleaned up)
Unworking Address : via Zups 1, 7013 Domat/Ems
<script>
initialize( "googlemap-viazups17013domat/ems", "via Zups 1 7013 Domat/Ems" )
</script>
non Working HTML output (cleaned up)
Also note that if I change the address to display Number 2 of the same street it works! But Number 1 never works.
––––
Edit :
Here is the initialize function :
function initialize( div, address ) {
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById( div ), myOptions);
//map.disableDragging()
if (geocoder) {
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("Impossible de localiser " + address);
}
});
}
}

Related

Google map API theme option page not displaying

I'm having some issues with the integration of a google map in my web site which can geocode an address before displaying the map with the correct location.
So i have a script (it worked when i was in localhost but since i put the web site online nothing happens) :
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
var firstLoc;
function findAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address' : document.getElementById('address_field').value},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
firstLoc = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map-location"),
{
center: firstLoc,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert('Geocode failed: ' + status);
}
}
);
}
google.maps.event.addDomListener(window, 'load', findAddress);
</script>
I put an address in a field in my theme option page then i register the value and put it in a hidden input in my front-end and try to get it with geocoder.geocode( { 'address' : document.getElementById('address_field').value}
Seems to have a problem with geocoding, i tested with a simple script with a fix position and it showed fine.
In case you need it this is how i display the map in the front-end :
<div class="contact-map">
<div id="map-location"></div>
<form class="address-hidden">
<?php echo "<input id='address_field' type='text' value= '{$content_options['geolocal_setting']}'/>"?>
</form>
</div>

Geocode to produce multiple markers google maps

Can any suggest why this code doesn't provide 2 markers on my map?
http://pastebin.com/1uaNjeVy
I'm not sure whether it is a syntax error or a restriction by google?
Edit:
I got it working by doing the below anyway, apologies for not posting the code direct to here.
My new issue is that when I open the page sometimes it finds all of the addresses, other times it brings up the alert?
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': "Eldon Square 24-26 Sidgate, Newcastle upon Tyne"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var img = "https://dl.dropboxusercontent.com/u/55888592/marker26.png";
var info = "<div><p>Sometext</p></div>";
var infowindow = new google.maps.InfoWindow({
});
var latlng = results[0].geometry.location;
var marker = new google.maps.Marker({
icon: img,
position: latlng,
map: map,
content: info
});
google.maps.event.addListener(marker, "click", function(content) {
infowindow.setContent(this.content);
infowindow.open(map,this);
});
} else {alert("alert");
}
marker.setMap(map);
});
The geocoder is asynchronous. Your are setting the marker map variable before the marker is created. You should do that in the callback function of the geocoder. (The javascript console is your friend)
And your marker images fail to load from the URL provided (probably because it is https)
working example

Remove default markers in google maps

I recently learn t to add custom markers to the Google maps. So i created a route with directions API. After that I added my own markers. Now i am facing a problem where both, the original one and the custom one are showing up. How can i remove the default markers to show my originals one.
Code I wrote to add custom markers
function addmarkers()
{
$.each(order,function(key,value)
{
geocoder.geocode( { 'address': waypts[value]}, function(results)
{
var source = 'images/markers/'+i+'.png';
var latlang = results[0].geometry.location;
var marker = new google.maps.Marker({
position: latlang,
map: map,
icon: source
});
});
});
};
I am calling this function just after the initialize() function
function initialize() // creating maps
{
google.maps.visualRefresh = true;
currentlocation = new google.maps.LatLng(mylat,mylong);
var mapoptions =
{
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: currentlocation
}
map = new google.maps.Map(document.getElementById('map'),mapoptions);
addmarkers();
directionsDisplay.setMap(map);
};
Now you can see in the pic, I am getting both the default as well as the customized markers. Where is this going wrong ?

Is it possible to display the map with only the address?

I would like to use GoogleMaps API v3.
Before, I was using version n°2 and I had just to put the address and the map was displayed.
Is it always possible with version n°3 ?
If yes, how ?
I always find scripts with latitude, longitude... but no script with address.
Thanks a lot and sorry for my poor english.
I guess you mixed up Maps-Javascript-API and the Static-Maps-API(current Version is V2).
In the static-maps-API you may use an address as center-parameter.
In the Javascript-APIs you need a LatLng (no matter if V2 or V3). If you only have an adress, you must request the LatLng using a geocode-request.
Basically you need to look for something called geocode. It is a part of API documentation. something like below will help:
var geocoder;
var map;
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;
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);
}
});
}
Helpful Link

How to center a google map around a country if you just have the country name

I have a page about hiking in various countries. I am trying to make a page like that for each country, but not sure how to automatically center the google map around a country and also have it adjust the focus depending on the size of the country.
Here are my problem pages:
http://www.comehike.com/outdoors/country.php?country_id=6&country_name=Belarus
http://www.comehike.com/outdoors/country.php?country_id=1&country_name=United%20States
You see how the centering and focus size is static? That is because I currently use this code to center the map:
function initialize( )
{
var myLatlng = new google.maps.LatLng(37.775, -122.4183333);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
But that is only because I am not sure how to do it by country name, and adjust the size automatically. How can I do this all by passing a country name into the initialize function?
Thanks!
You can transform country name to the coordinates using Geocoding service. Example provided by Google centers a map but it does not zoom it. To zoom it you should use map.fitBounds() method using LatLngBounds object returned by the geocoder.
This is an example code:
var myLatlng = new google.maps.LatLng(37.775, -122.4183333);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var address = "Belarus";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});