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?
Related
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>
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
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 displaying the center in the top left corner. 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();
var address1 = document.getElementById('address').value;
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 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);
}
});
}
Since I load the page with .load is is hidden until you navigate to the div, then it becomes visible, maybe that´s the problem?
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.
I have the same problem before
don't use
geocoder.geocode( { 'address': address}, function(results, status) {.....
when loading a page with ajax, "geocoder.geocode..." can't return correct geometry.location.
I don't why
but when I try to change my code, map is working
my code like
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json?address="+youraddress+"&sensor=false",
type : "POST",
dataType: "json",
cache: false,
success: function(result){
if(result.results.length){
lat=result.results[0].geometry.location.lat;
lng=result.results[0].geometry.location.lng;
//map
var map
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
............
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize')
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.
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