Can't get Geocoder working in Google Map API -
i have google map 2 info boxes. info boxes working geocoder button doesn't reason.
i can info boxes working on page , can geocoder working on page, can't them both working on same page.
what want able type in address , place pin , zoom location (like on below link googles example).
the geocoding code google: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
the infobox.js from: https://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js
here what's in head:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_removed&sensor=false"> </script> <script type="text/javascript" src="infobox.js"></script> <script type="text/javascript"> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var secheltloc = new google.maps.latlng(-27.532861,134.693340), markers, mymapoptions = { zoom: 7, center: secheltloc, maptypeid: google.maps.maptypeid.roadmap }, map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions); function initmarkers(map, markerdata) { var newmarkers = [], marker; for(var i=0; i<markerdata.length; i++) { marker = new google.maps.marker({ map: map, draggable: false, position: markerdata[i].latlng, visible: true }), boxtext = document.createelement("div"), //these options infoboxes infoboxoptions = { content: boxtext, disableautopan: false, zindex: null, maxwidth: 0, boxstyle: { background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", opacity: 0.85, }, closeboxmargin: "6px 2px 0px 0px", closeboxurl: "http://www.google.com/intl/en_us/mapfiles/close.gif", infoboxclearance: new google.maps.size(1, 1), ishidden: false, pane: "floatpane", enableeventpropagation: false }; newmarkers.push(marker); //define text , style infoboxes boxtext.style.csstext = "border: 1px solid black; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px"; boxtext.innerhtml = markerdata[i].businessname; //define infobox newmarkers[i].infobox = new infobox(infoboxoptions); //open box when page loaded newmarkers[i].infobox.open(map, marker); //add event listen, infobox marker opened when user clicks on it. notice return inside anonymous function - creates //a closure, thereby saving businessname of loop variable new marker. if did not return value inner function, //the variable in anonymous function refer last used, i.e., last infobox. pattern (or //serves same purpose) needed when setting function callbacks inside for-loop. google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { newmarkers[i].infobox.open(map, this); map.panto(markerdata[i].latlng); } })(marker, i)); } return newmarkers; } //here call initmarkers() made necessary data each marker. markers returned array markers variable markers = initmarkers(map, [ { latlng: new google.maps.latlng(-33.878301, 150.981126), businessname: 'vegetarian health' }, { latlng: new google.maps.latlng(-33.799211, 150.926357), businessname: 'business name two' } ]); } // geocoder below 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 not successful following reason: ' + status); } }); } </script>
here what's in body:
<body onload="initialize()"> <div id="panel"> <input id="address" type="textbox" value="sydney, nsw"> <input type="button" value="geocode" onclick="codeaddress()"> </div> <div style="width:850px; height: 600px" id="map_canvas"></div> </body>
there error reported:
uncaught typeerror: cannot read property 'setcenter' of undefined
so seems map
defined local. actually, defined global:
var geocoder; var map;
but local again here:
geocoder = new google.maps.geocoder(); var secheltloc = new google.maps.latlng(-27.532861,134.693340), markers, mymapoptions = { zoom: 7, center: secheltloc, maptypeid: google.maps.maptypeid.roadmap }, map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions);
so, ,
before map
should changed ;
:
... maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions);
Comments
Post a Comment