JavaScript - Help Customising Google Map Api [willing To Pay]
Hi guys,
I really need a custom google map, something like http://www.zeemaps.com/ offers, Where you can: Add placemarkers to a map by clicking an add button A sidebar with all locations listed Info windows when you click on markers giving you information And a couple of other features! I would really appreciate some help, spent 3 days on this now and i have: Code: <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps? file=api&v=2.x&key=ABQIAAAAWRAYgBXwUGsMlXv1A5Q4bBRI_5kORY0Qfu7GdhaM1xc6on2HoBT-8FUS12kkCbVXsWHjVsqeAyFq5Q&sensor=false" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(54.77534585936447, -2.5927734375), 6); map.setUIToDefault(); } var publisher_id = 'ca-pub-4595198420871047'; var adsManagerOptions = { maxAdsOnMap : 4, style: G_ADSMANAGER_STYLE_ADUNIT, // The channel field is optional - replace this field with a channel number // for Google AdSense tracking //channel: 'your_channel_id' }; adsManager = new GAdsManager(map, publisher_id, adsManagerOptions); adsManager.enable(); } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 100%; height: 100%"></div> </body> </html> Similar Tutorialshello all I'm trying to get the textarea text editor plugin CKEditor to work on my project. I'm using cakephp and following this simple tutorial amilan.wordpress.com/2010/01/28/ckeditor-integration-in-cakephp which basically tells that once I've included jquery and ckeditor then all I need to do to create a ckeditor textarea is: echo $form->textarea('content', array('id'=>'content','class'=>'ckeditor')); That all works fine except I can't resize the textarea at all. I've tried with css and putting 'cols' and 'rows' in there but to no avail. When I remove the ckeditor class it does work so I think it's something to do with the config. There is a config.js file which you can fiddle with but I don't know enough to know what to do to alter the height and width. Can anyone help me? The relevant bit of the documentation is http://docs.cksource.com/CKEditor_3....Configurations thanks if anyone can help me I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head> <script type="text/javascript"> function loadSubPlace(File,ID,Msg,Eile,EID,Esg){ loadXMLDoc1(File,ID,Msg); var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000); } </script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #map_canvas {width:30%; height:250px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM countries WHERE Country='{$_SESSION['Country']}'"); while($row = mysql_fetch_array($result)){ echo $row['Map']; } mysql_close($con); ?>); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div class="countryright" id="map_canvas"> include("dbconnect.php"); $snowball=explode(';',$_POST['syringa']); $turnsol=$snowball[1]; $violet =$snowball[2]; $wakerobin=$snowball[3]; global $turnsol; global $violet; global $wakerobin; echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />'; $result=mysql_query("SELECT * FROM regions WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !='' ORDER BY sub ASC"); while($row = mysql_fetch_array($result)){ $wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}"; $tigerlilly=$row['RegionPId']; echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />'; } echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />'; echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />'; mysql_close($con); ?> I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. Can the Google API replace scraping? You can get blocked by Google if you scrape, but can you get the same info from the Google API at no risk?
Hello. I have a problem. I use google map to show some points. I have to show all points for some region, and number of points gets to 4.000. So it takes some minutes to show all points. I use gif image-> size: 400 bytes I found http://fundrace.huffingtonpost.com/ and it takes only couple of seconds to load more 1000 markes. Does someone know how to resolve this? Thanks Hi, I have a table with FROM and TO columns and a column with MAP/DIRECTIONS link. When a user clicks on the link, it should display Map and Directions on the iframe on the same page. How can I achieve this using Google map and directions API? Thanks I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah! Here's what I originally had: I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc. Code: </script> <script src="//maps.google.com/maps?file=api&v=2&key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13); // Add the latitude/longitude marker to the map var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>); map.addOverlay(new GMarker(point)); map.setUIToDefault(); } } </script> <b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b> Hi there! I'm creating a map that starts at the users location, has multiple locations marked out (that are fetched from JSON), tells if the person is withing a 100m range of the location and shows an overlay when a location is clicked on. Is this even possible? (doesn't feel like it atm ) and if it's possible, which parts of google's api do I use? If anyone has far to much spare time and feels like showing me how to do 1/2 of these things I would be extremley grateful, but I don't expect that. Cheers. I have some problems with intergrating google maps into my page I cant seem to get a marker to appear on my map. I have tried numerous methods but non seem to work. I have integrated the google maps on my main site, repositioned and re-sized. The code below is a test page i work on to get code to work. It's just a map on a page entire code: <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 25px; padding: 25px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrxZnpYBNIwzBFVYaDY__BMONEjNEGZaI&sensor=false"> </script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);} var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> can anybody tell my where i am going wrong and just the map appears with no marker? thanks Hey all I'm quite a newbie at javascript and I'm trying to have links to google maps markers. I have a page with my embeded google maps on it and some markers. What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map. For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear. Can anyboy help me with this or even direct me to some code that would help. Thanks all. Hi I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude Code: function usePointFromPostcode(postcode, callbackFunction) { localSearch.setSearchCompleteCallback(null, function() { if (localSearch.results[0]) { var resultLat = localSearch.results[0].lat; var resultLng = localSearch.results[0].lng; var point = new GLatLng(resultLat,resultLng); callbackFunction(point); }else{ alert("Postcode not found!"); } }); localSearch.execute(postcode + ", UK"); } Any ideas/tips would be be much appreciated Hey I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document. What I'm trying to do is categories the markers on my map. I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked. Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why. here's my code: Code: <!DOCTYPE HTML> <html> <head> <title>Google Maps</title> <script src="mykey"></script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <table border=1> <tr> <td> <div id="map" style="width: 550px; height: 450px"></div> </td> <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> <div id="side_bar"></div> </td> </tr> </table> <form action="#"> Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br /> </form> <script type="text/javascript"> _uacct = "UA-162157-1"; urchinTracker(); </script> </body> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var side_bar_html = ""; var gmarkers = []; var map = null; function createMarker(point,name,html,category) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); marker.mycategory = category; marker.myname = name; gmarkers.push(marker); side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; return marker; } function show(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(true); } } document.getElementById(category+"box").checked = true; } ensures the checkbox is cleared == function hide(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(false); } } document.getElementById(category+"box").checked = false; that we just hid infowindow.close(); } function boxclick(box,category) { if (box.checked) { show(category); } else { hide(category); } makeSidebar(); } function myclick(i) { google.maps.event.trigger(gmarkers[i],"click"); } var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng( 53.8363,-3.03771), 11); GDownloadUrl("categories.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new google.maps.LatLng(lat,lng); var address = markers[i].getAttribute("address"); var name = markers[i].getAttribute("name"); var html = "<b>"+name+"<\/b><p>"+address; var category = markers[i].getAttribute("category"); // create the marker var marker = createMarker(point,name,html,category); map.addOverlay(marker); } document.getElementById("side_bar").innerHTML = side_bar_html; show("theatre"); hide("golf"); hide("info"); }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } </script> </body> </html> If anybody help with this and tell me where I am going wrong, it would be much appreciated. thanks Hi there, I know too little of JavaScript to get the Google Maps API working. I hope someone can help me out! My goal is to display an address. In the example on google, you can input it through a form: http://code.google.com/apis/maps/doc...ng-simple.html I would like the map to show the location+marker when I open the page, not after clicking a submit button. However, I only want an address in my html. I want the API to convert it in a LatLng format. Hopefully, someone can take the time to look at it. It's all in the source code of the page mentioned above, I believe. Thanks! Is there a javascript that when I mouse over a object like the the magnifying glass that can be seen after a google search that will display a preview image and then make that image clickable to pull up that webpage/file? TYIA James i take an google suggestions code. view source... i hope that is the best "ajax google suggestions" code created... and try to understand it. someone can help to understand that javascript ? write remarks... formated code file attached + : Link1 Hi guys, I'm trying to run this sample file that i got from the google docs. I want to write a stock ticker from google finances xml feed and this is a sample they had. Code: <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hellofinance"> <Require feature="finance"/> </ModulePrefs> <Content type="html"> <![CDATA[ Hello world! Here is your portfolio:<br/> GOOG: <span id=_IG_SYM1_l></span> (<span id=_IG_SYM1_c></span>)<br/> AAPL: <span id=_IG_SYM2_l></span> (<span id=_IG_SYM2_c></span>)<br/> INTC: <span id=_IG_SYM3_l></span> (<span id=_IG_SYM3_c></span>)<br/> <script> var quote = new google.finance.Quote(); quote.enableDomUpdates( { 'GOOG' : '_IG_SYM1', 'AAPL' : '_IG_SYM2', 'INTC' : '_IG_SYM3' } ); quote.getQuotes(["GOOG", "AAPL", "INTC"]); </script> ]]> </Content> </Module> my problem is i don't know how to execute it so i can see how it works. I tried sticking this code within a php file and it returns an error on the first line for unexpected t-string. So i tried changing the extension to xml and it just displays the code but does not execute. I'm stumped. Any help is appreciated. Thanks P.S. - Yes i do have the zend gdata framework installed and running on my server and is working correctly according to their test. I started using Google API Visualizations to create a bar chart which was very easy because of the code examples google gives but then I realised instead of setting the values I want within the html I wanted a form which would let you input the values you want for the bar chart. I made it look like this: Using this code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <SCRIPT LANGUAGE="JavaScript"> function UpdateChart (form) { var TeamA = form.TeamA.value; var TeamB = form.TeamB.value; var TeamC = form.TeamC.value; var TeamD = form.TeamD.value; } </SCRIPT> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['barchart']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Score'); data.addRows(4); data.setValue(0, 0, 'Team A'); data.setValue(0, 1, 500); data.setValue(1, 0, 'Team B'); data.setValue(1, 1, 300); data.setValue(2, 0, 'Team C'); data.setValue(2, 1, 70); data.setValue(3, 0, 'Team D'); data.setValue(3, 1, 150); // Create and draw the visualization. new google.visualization.BarChart(document.getElementById('visualization')). draw(data, {title: 'Scores', legend: 'none'}); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 300px; height: 300px;"></div> <form name="input" method="get"> Team A: <input type="text" name="TeamA" value="0" size="1"> <br>Team B: <input type="text" name="TeamB" value="0" size="1"> <br>Team C: <input type="text" name="TeamC" value="0" size="1"> <br>Team D: <input type="text" name="TeamD" value="0" size="1"> <br> <INPUT TYPE="button" NAME="btnUpdate" Value="Update" onClick="UpdateChart(this.form)"> </form> </body> </html> However, instead of the values I've bolded I want the values from the form to be used. I've never really used Javascript before so I'm not sure what to do. Any help would be appreciated. Hi, Can anyone help define the difference between the 2 scripts below and help identify what is/should happen for each? Code: <script type="text/javascript"> var _gaq = _gaq || []; //NHG COMMENT: if there is an existing account, then it needs to be incorporated within this tag. //The xx-xxxx-x par represents the google account code that needs to be inserted // if there is no existing tag in place, then take out the 2 follwoing lines marked (1) and (2)and (3) (1) _gaq.push(['_setAccount', 'XX-XXXXXX-X']); (2) _gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']); (3) _gaq.push(['_trackPageview']); NHG COMMENT: This is the global tag and everything below this MUST NOT BE CHANGED _gaq.push(['_setAccount', UA-16522538-1']); _gaq.push(['_setDomainName', 'domain.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> Code: // copy and paste the tag below <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'XX-XXXXXX-X']); _gaq.push(['_setDomainName', 'MYSUBDOMAIN.domain.com']); _gaq.push(['_trackPageview']); _gaq.push(['_setAccount', UA-16522538-1']); _gaq.push(['_setDomainName', 'domain.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> Hello guyz! I need to fetch some images whit custom sizes in Google Images, this is the API from Google that let me search end fetch images: Code: /* * How to search for images and restrict them by size. * This demo will also show how to use Raw Searchers, aka a searcher that is * not attached to a SearchControl. Thus, we will handle and draw the results * manually. */ google.load('search', '1'); function searchComplete(searcher) { // Check that we got results if (searcher.results && searcher.results.length > 0) { // Grab our content div, clear it. var contentDiv = document.getElementById('content'); contentDiv.innerHTML = ''; // Loop through our results, printing them to the page. var results = searcher.results; for (var i = 0; i < results.length; i++) { // For each result write it's title and image to the screen var result = results[i]; var imgContainer = document.createElement('div'); var title = document.createElement('h2'); // We use titleNoFormatting so that no HTML tags are left in the title title.innerHTML = result.titleNoFormatting; var newImg = document.createElement('img'); // There is also a result.url property which has the escaped version newImg.src = result.tbUrl; imgContainer.appendChild(title); imgContainer.appendChild(newImg); // Put our title + image in the content contentDiv.appendChild(imgContainer); } } } function onload() { // Our ImageSearch instance. var imageSearch = new google.search.ImageSearch(); // Restrict to extra large images only imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM); // Here we set a callback so that anytime a search is executed, it will call // the searchComplete function and pass it our ImageSearch searcher. // When a search completes, our ImageSearch object is automatically // populated with the results. imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]); // Find me a beautiful car. imageSearch.execute("Subaru STI"); } google.setonloadCallback(onload); But all I could find about restricted images sizes is this: Code: imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE, google.search.ImageSearch.IMAGESIZE_MEDIUM); My problem is that I need custom fixes images sizes, not between a range of values like the above script was giving me... Google API reference says that: Code: google.search.ImageSearch.RESTRICT_IMAGESIZE - When this is specified as the value of type, the image search results will be restricted to images with certain pixel dimensions. Valid optional values for this type are as follows: * google.search.ImageSearch.IMAGESIZE_SMALL - restrict to small images, icons * google.search.ImageSearch.IMAGESIZE_MEDIUM - restrict to medium images * google.search.ImageSearch.IMAGESIZE_LARGE - restrict to large images * google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE - restrict to extra large images Those who wants to play whit Google Playground, this is the link: Code: http://goo.gl/sPs2 Could some one help me get that images whit fixed sizes? Hi, I have just set up google analytics on my website but it is showing tracking unknown symbol in the status. Is it just the case of it taking time to set up or should it work straight away. Thanks Tyler |