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>
Related
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);
}
});
}
}
In a webapp I´m loading a page (googlemap.asp with the map) with ajax.
I´m loading the "googlemap.asp" in a div with jquery.load and it is only displaying a small map in the top left corner, so its not getting the size 320 x 600 as I have set in the div.
It is not rendering the map correctly when I load it this way.
But if I just load the "googlemap.asp" directly in the browser(without ajax) then it displays right, so I guess I have to refreash it somehow when I load it with ajax?
This is what I have:
<div id="map_canvas" style="height:600px; width:320px;" ></div>
window.onload=googleMaploadScript();
function googleMaploadScript() {
var script =document.createElement("script");
script.type="text/javascript";
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var address1 = document.getElementById('address').value;
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(57.109577,12.286513),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address1);
}
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);
}
});
}
I guess I load it in the wrong order somehow, and thats why it is not rendering right, or could it be that the div is not visible at start?
Any input appreciated, thanks.
Try changing Height and Width from Script.
For centering add this script to your map script it will center it . But I am also having trouble to bring it from top left to center. In my case when I change the orientation or size the map loads and centered
//script for centering
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
Let me know if it works . Here is the LINK for more information
I have problems in using the Google Maps Javascript API to retrieve the coordinates based on the address. I searched through Google forum and found that Geocoding concept has resolved this issue.
But my application does not support Geocoding. Is it not possible to implement this logic using Javascript API
Example from Google API : https://developers.google.com/maps/documentation/javascript/geocoding?hl=fr :
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.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);
}
});
}
<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
Update: Based on the OVER_QUERY_LIMIT recommendation, I found a potentially promising solution that I will try tonight.
Initially I could not get a Google Map API v3 to display on my PC. The same code worked on an Amazon server. I've moved to Rackspace and now it doesn't display. Here's the code I'm using:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiv-nrDCYEEGzD1mk3jAfapfrBH878pqc&sensor=true">
</script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var phpAddressInit = "<?php echo $mapAddress ?>";
//document.write("phpAddressInit: " + phpAddressInit);
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var latlng = new google.maps.LatLng(33.5750, -117.7256);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
geocoder.geocode( { 'address': phpAddressInit}, function(results, status) {
//alert("---address3: " + phpAddressInit);
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 codeAddress(control,ctrlAddress) {
//alert("---in codeAddress; " + "control: " + control
// + "ctrlAddress: " + ctrlAddress);
//var address = document.getElementById('address').value;
//aws.push
var address;
if ( control == 1 )
{
address = document.getElementById('address').value;
}
else
{
address = ctrlAddress;
}
geocoder = new google.maps.Geocoder();
//alert("---address1: " + address);
geocoder.geocode( { 'address': address}, function(results, status) {
//alert("---address2: " + address);
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>
...
I've googled this for several hours, tried several different examples, but it won't display. What am I missing?
Seb P made me aware it is working now. Thank you, it is working now.
Still using the original code that didn't work so I can't say with confidence that the problem is fixed. Looking through links associated with OVER_QUERY_LIMIT, Rackspace seems to group users together to use the same IP leading to this error.
None of this is confirmed but that seems to fit with what I am seeing. It would be nice if someone could shed more light on this so that this problem can be avoided.
Having some problems initialising a google map using geocoding. First issue is with any commas being used in the $gmap string, second issue is with getting a "gmap_initialize is not defined". I know everything outside of the function is correct, any ideas?
<?php $gmap = "Prague, Czech Republic"; ?>
<script type="text/javascript">
function gmap_initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': <?php echo $gmap; ?>}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 16,
position: results[0].geometry.location,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
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>
Did you look at the output of your script?!
My guess is it looks something like:
geocoder.geocode( { 'address': Prague, Czech Republic}, function(results, status) {
In your PHP script, you probably actually want something like:
geocoder.geocode( { 'address': '<?php echo $gmap; ?>'}, function(results, status) {
and you'll probably want to escape single quotes out of the $gmap variable.
This looks like a JavaScript Error. Saying that this function (which looks right) is not defined. Maybe the call to gmap_initialize happens before this definition?
Usually this error comes with JavaScript when something else on the page is not quite right, such as a single missing close tag...
Have you validated the code with W3C?