<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=pt-PT" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var request = {
placeId: 'ChIJO_PkYRozGQ0R0DaQ5L3rAAQ'
};
service = new google.maps.places.PlacesService(document.getElementById('places'));
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log(place);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body> <div id="places"></div> </body>
</html>
I have this code that works well, but i don't know why i need to use
PlacesService(document.getElementById('some id'));
If i use only PlacesService(); I will get an error. The html_attributions is none: html_attributions: Array[0]length: 0
So, is my code fine, or what should I do?
http://jsfiddle.net/c6p14g4d/
(If you haven't figured it out 6 months later) Your code will work and should adhere to Google's policies surrounding the PlacesService.
From my understanding, "attributions" are some sort of information attributing the source of the information to a particular partner, for example, a review from Yelp (I don't know if they partner with Yelp, but that's the idea). Obviously the partner wants the end consumer of the information to know who provided it.
The idea is that when you perform a search with the PlacesService, if there is an attached map, it will render "attributions" automatically. Thus, if you don't have a map, the library will attempt to render the attributions into an html node. Hiding that node (or the map) is against the policy.
It's important to note that the html_attributions array might not always be empty in all cases when using the library, but as long as you provide a visible node in the DOM, you're fine, since the library automatically populates the node with attributions if they are there.
From the documentation, that needs to be either a HTMLDivElement or a Map:
Constructor Description
PlacesService(attrContainer:HTMLDivElement|Map) Creates a new instance of the PlacesService that renders attributions in the specified container.
Related
I'm going with the basic example in here except I need to be able to update the map based on new data (a json file.) I couldn't find a way to load the data directly inside Datamap object, so I'm loading it with D3.json and using the command to update the map. For some reason the popupTemplate function is receiving null data object and I don't know how to fix it.
What's the best way to do this?
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
var data;
var map = new Datamap({
element: document.getElementById('container'),
fills: {
HIGH: '#afafaf',
LOW: '#123456',
MEDIUM: 'blue',
UNKNOWN: '#FFFFFF',
defaultFill: 'green'
},
geographyConfig: {
popupTemplate: function(geo, data) {
console.log(data)
return ['<div class="hoverinfo"><strong>',
'Number of things in ' + geo.properties.name,
': ' + data[geo.id].numberOfThings,
'</strong></div>'].join('');
}
}
});
map.legend();
d3.json("path/to/data.json", function(error, json) {
if (error) return console.warn(error);
data = json;
map.updateChoropleth(data);
});
</script>
This is my json file:
{
"IRL": {
"fillKey": "LOW",
"numberOfThings": "2002"
},
"USA": {
"fillKey": "MEDIUM",
"numberOfThings": "10381"
}
}
To make it easier to debug, I put on jsfiddle
I did not have problems loading the data directly inside Datamap. In any case, I also simulated a data update...the color gets updated but not the value (numberOfThings). In the example in the tutorial, it is not clear this can be done although it would make sense that one should be able to update values.
I am leaving you with the FIDDLE showing the results of my experiment.
A couple of notes:
I believe your popup was not showing because its return string needs
to be data.numberOfThings.
If I am not mistaken when I played with this before, if you don't have data for a country, then the popup is not updated and the same value as for the last country with data is displayed.
#Kiarash, there are two problems here:
You are using the Datamaps from the datamaps.github.io site, which I don't recommend since I can't guarantee reliability (uptime) or backwards compatibility. You are best off downloading it from the Github project page
data won't have a property with the country name, it should be accessed like data.numberOfThings.
Here is a working version of the code you supplied
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
I am trying to create a plugin for wordpress that simply takes an array of Country Names entered in post or page creation (Much like tags), and generates a map using the Google Maps APIv3 with all of the countries highlighted (using polygon data from the natural earth data set), but I am coming up extremely short in the area of finding resources regarding how to merge these two technologies together.
I am pretty familiar with the Google Maps API and how to manipulate it within wordpress using PHP and variables provided the post object, but I can't seem to figure out how to merge it with the data provided in the natural earth data set.
I have stumbled on these, but still can't figure it out.
Country boundries using Google Map API v3
Google Maps V3: Draw German State Polygons?
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_query_sidebarF_local.html?country=Germany
The last link there is VERY close to what I would want to do, except with multiple countries which is only a matter of adding more POI's in the form of countries. But I can't get this to work on my site.
Does anyone know of any good tutorials on how to do this? Or better yet, has anyone already done this type of thing with any success?
Here's what I have currently:
<head>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/&sensor=false"></script>
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(27.246933444275317, 318.515625),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col38",
from: "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA",
where: "col2 in (\x27CAN\x27, \x27MEX\x27, \x27USA\x27, \x27JPN\x27
)"
},
options: {
styleId: 9,
templateId: 8
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<head>
<body>
<div id="map-canvas" style="width: 100%; height: 400px;"></div>
</body>
Thanks,
I think you need the "IN" operator:
example
And I would suggest using the "iso" column to reduce the size of the query string.
your code works for me
Note: I did fix this "unterminated string":
where: "col2 in (\x27CAN\x27, \x27MEX\x27, \x27USA\x27, \x27JPN\x27
)"
Example allowing selection of multiple countries:
http://www.geocodezip.com/v3_FusionTables_MultiCountryBrowser.html?countries=Afghanistan,Albania,Algeria,Brazil
We'd like to use Google Maps to keep track of local garage sales. We've created a map (see here) and we'd like to embed that map on our website. However, when we do, we lose the sidebar of the map that contains a list of all the garage sales.
We're quite familiar with how to embed a Google; they've made the process quite simple. However, is there a way that we can embed the map and keep the sidebar list of garage sales?
To my knowledge, the best way would be to create your own container of the sales and link them to a map you are populating. I am assuming you are building and entering your data on Google's site and using the embed feature, which means my answers is significantly more work.
You would need to have your down data source and use the Maps API to create a map and a sidebar.
Your woudln't be using the iFrame anymore, you would be coding your own solution. If you have done JavaScript before, it is really fairly easy, if you haven't there are some good examples.
this tutorial http://econym.org.uk/gmap/basic2.htm shows exactly how to do it and supplies the code (which i reproduce by kind permission of the authors: Community Church Javascript Team http://www.bisphamchurch.org.uk)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
Back to the tutorial page
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 43.907787,-79.359741), 8);
// add the points
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.82589,-78.89231);
var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
map.addOverlay(marker);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
</body>
</html>
I'm well into accessing the Google Maps API v3 with Javascript, and I've experimented successfully with a lot of different sample scripts, but I've come to the conclusion that the best (and quickest) method for producing embedded maps - with sidebars and lots of other options - is to go to http://www.mymapsplus.com/AddMyMap (thanks Chris B), and make a £10 donation to get rid of the adverts in generated maps - see e.g. http://www.hope-projects.org.uk/node/41. Their Edit page allows you to add or change almost any option you could think of with a few clicks.
What you want to do requires use of the MAPS API but it's not very hard if you know some javascript. Essentially, load the datapoints into a Javascript array, plot them on the map and then populate your html with the array information.
This link is a page I recently wrote that does the above and also dynamically repopulates the array from the db as the user drags the map (hardly any CSS at present either).
map with dynamic links
Happy to answer any more comments.
P.S. Cool map icon!
Tim
I found one site that will generate your map with a sidebar, but if you want more control, you'll need to create your own map, as the others have suggested.
http://www.mymapsplus.com/AddMyMap
http://www.mapchannels.com/
Another site that will generate your map with a sidebar is mapalist.com.
How do you access individual elements in Google Maps?
Is there a way to do this through the API or will I have to parse the DOM and pull the elements (e.g., distance, time, directions) separately? Version 2 or 3 of the API is fine.
Example:
<div jstcache="6" style="text-align: right; padding-bottom: 0.3em;"
jseval="this.innerHTML = $Route.summaryHtml">38.9 mi (about 40 mins)</div>
I want just the distance (e.g., 38.9 mi) for a Javascript calculation. If nothing exists in the API, I'll parse it out manually.
Thanks,
Mark
Note: This is the full example site I'm using: http://code.google.com/intl/en-EN/apis/maps/documentation/examples/directions-advanced.html
Update with simplified solution:
For those that need it, here is a very simple full HTML page that I was able to thin out from the example that Cannonade posted. This has all styling and other scripts removed:
<html>
<head>
<script src="maps.google.com/maps?file=api&v=2.x&a…; type="text/javascript"></script>
<script>
function initialize()
{
alert("loading ...");
if (GBrowserIsCompatible())
{
var wp = new Array ();
wp[0] = new GLatLng(32.742149,119.337218);
wp[1] = new GLatLng(32.735347,119.328485);
directions = new GDirections(); directions.loadFromWaypoints(wp);
GEvent.addListener(directions, "load", function()
{
alert(directions.getDuration().seconds);
});
}
else
{
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
</script>
</head>
<body onload="initialize();" onunload="GUnload();"></body>
</html>
Put the codesamples into index.html and you'll be set.
You you can get the individual properties of a GDirections::loadFromWaypoints request in the response.
getDuration - The duration in seconds for the travel time.
getDistance - The distance in meters or a localized string describing the distance.
You can find an example of getting the travel time here (src).