Jump to content

Simple Javascript problem


Recommended Posts

Hello Im trying to use google maps at my site, this is the code i am using:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">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);	  }    });  }</script></head><body onload="initialize()"><div id="map_canvas" style="width: 320px; height: 320px;"></div>  <div>    <input id="address" type="textbox" value="Sydney, NSW">    <input type="button" value="Encode" onclick="codeAddress()">  </div></body>

At the bottom the input fields are located.. Now i don't want these showed since i need the address to be defined through PHP. Can anyone tell me how to do this easiest? I've tried to make the textbox hidden and load the value through php.. No problem.. But i don't know any Javascript, so i can't figure out how to get rid of the button and still have the codeAddress() function load. Thanks in advance :)

Link to post
Share on other sites

well, you could use CSS to hide the button, but you still need to determine what event triggers the codeAddress. Why not make it run onload of the button element? or as part of initialize()?

Link to post
Share on other sites
well, you could use CSS to hide the button, but you still need to determine what event triggers the codeAddress. Why not make it run onload of the button element? or as part of initialize()?
These where my thoughts too, but i don't know any Javascript at all. How can make the onload run both initialize() and codeAddress(), and how should i define the address variable if i choose this way to go?
Link to post
Share on other sites

Just add js script under map canvas, and add address as argument to send to function

<script type="text/javascript"> codeAddress('Sydney, NSW');</script>

this can include php code to pass code vale

<script type="text/javascript"> codeAddress('<?php echo address; ?>');</script>

  function codeAddress(addr) {    //var address = document.getElementById("address").value;var address = addr;    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);          }    });  }

no inputs required

Link to post
Share on other sites

Thanks for the answer, that makes sense, but it still won't work for me.Heres what the code looks like i (tried) to make your changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">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(addr) {    var address = addr;    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></head><body onload="initialize()"><div id="map_canvas" style="width: 320px; height: 320px;">  <script type="text/javascript">	 codeAddress('Copenhagen');    </script>  </div></body>

The map will still load somewhere i Australia instead of Copenhagen.

Link to post
Share on other sites

because geocoder = new google.maps.Geocoder(); is created after the page has loaded, the codeAddress function will fail so start it after initialise has run

 <body onload="initialize();codeAddress('Copenhagen');">

OR use unobtrusive javascript and remove ' onload="initialize();codeAddress('Copenhagen');" ' completely from body tag and add this instead to your javascript

window.onload=function(){ initialize();codeAddress('Copenhagen'); }

remove original script tags etc <script type="text/javascript"> codeAddress('Copenhagen'); </script> Edit: you will also notice that it flashes from the Australian map to Copenhagen map, this is because '-34.397, 150.644' is the long/lat to Australian map, to go directly to Copenhagen or anywhere else, go to http://maps.google.co.uk/ bring up the area of map you require, right click that area, and select 'Whats Here' that should give long and lat coordinates, and then you just the coords you already have, with these new coordinates.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...