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
Related
I'm experiencing an very annoying problem with Google Maps. When I embed Google Maps for my company it shows another unrelated company in a white pop-over when I hover the label on the map. When I click my company label (the red company name on the map) it switches the address inside the white box in the upper left to that company but does not move the map pointer.
At first, when my company name was slightly different the other company was a company in India with a name that was similar and was also a webdesign agency. In the meanwhile I had slightly changed the displayed company name in Google Places. Now the change has been adopted by Google Maps and the issue persists. Only this time it is showing another company, in the UK, also a webdesign agency, the name is not similar.
To further clarify my issue I have attached screenshots.
I hover over my company label, the white popover shows the unrelated company name. (Screenshot 1)
I click 'my company label' (Screenshot 1)
The view changes to that in screenshot 2.
Note that this issue only occurs when Google Maps is embedded and set to point to my company.
I have already reported this issue to Google two weeks ago but I didn't receive any response yet.
Screenshot 1 (The state when hovering my company label)
Screenshot 2 (The state when company label has been clicked)
I am aware of the fact that stackoverflow is no customer service for Google but I am wondering if anyone else has experienced this issue as well. In case the issue is just a bug and I just have to wait for a fix, I would like to know if anyone has a workaround for this as it is quite embarrassing that Google Maps shows another company when you hover my company. Especially because the other company is also in the business of webdesign.
What's happening: Your code asks google to search your company ... and something goes wrong.
If you only have 1 marker, obviously you (the programmer) search the location (1 time), and you put it in your code.
Then you will never see that Indian company anymore.
Here is a simple example of a map, a marker and an infoWindow.
Is this what you want? Can you take it from here?
Any feature that's missing?
EDIT: oh yes ... I used a 'click' on line 31. You can change 'click' by 'mouseover'; then the infowindow is shown when hovering.
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
// making the map. Initialization
function initialize() {
// company location:
var companyLocation = {lat: 52.0400564, lng: 4.3483506};
// company logo:
var urlCompanyLogo = 'https://lh3.googleusercontent.com/-ON8pWapB8Ro/AAAAAAAAAAI/AAAAAAAAAGo/wiwqSbfDyxg/s60-p-rw-no/photo.jpg';
// content of the infowindow
var companyDetails = ' <img class="logo" src="' + urlCompanyLogo + '"> <h3>Kermit industries</h3> Retrieving any golf ball from the pond';
// the map
var map = new google.maps.Map(document.getElementById('map'), {
center: companyLocation,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: 18
});
// the marker
var marker = new google.maps.Marker({
position: companyLocation,
map: map,
title: 'Kermit industries'
});
// the infowindow
var infowindow = new google.maps.InfoWindow({
content: companyDetails,
position: companyLocation,
map: null // first set it to null, only show it after a click on the marker
});
// when the user clicks on the marker, the infowindow will appear
marker.addListener('click', function() {
infowindow.setMap(map);
});
}
// this will lauch the initialization once the page is loaded
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map {
height: 500px;
}
.gm-style-iw .logo{
float: right;
}
</style>
<div id="map"></div>
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
So, i have a problem. I had google maps street view on my site, there was a building panorama (inside), now API shows only street view near this building. Why and how can i fix it?
Here is my code:
function initialize() {
var fenway = new google.maps.LatLng(52.4980685,13.2951895);
var panoramaOptions = {
zoom: 1,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
rotateControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDefaultUI: false,
addressControl: false,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM,
hide: true
},
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
This may be a kind of bug(feel free to report it).
I guess you are talking about the place "Shebell Institut".
Let me explain why it's a bug:
Currently
the ID for this panorama is (at least for me):ag1bfIf47xUAAAGuxVUjCQ
and the location of the panorama(reported by the StreetViewService): (52.498042,13.29517199999998)
The location in your code differs a little bit, but when I use the exact location it should show the desired panorama(because it's the nearest)...but it doesn't.
Also when I query the panorama via StreetViewService.getPanoramaByLocation another panorama (with another location) will be returned, although the documentation says:
If the radius is less than 50 meters, the nearest panorama will be returned.
...but when I use the exact location it shouldn't return a panorama with another location.
I don't have a solution, because regarding to the documentation panorama-ID's are only stable within sessions.
But this must not mean that the panorama-ID must change often(I don't know what forces the change of a panorama-ID, but I can't imagine that the ID will be changed randomly).
So let's give it a try and use the panorama-ID(optionally).
set the panorama-location(fenway in this case) to
(52.498042,13.29517199999998)
request the panoramaData based on the ID (ag1bfIf47xUAAAGuxVUjCQ)
when both locations (fenway and the location of the returned panorama) are equal you may assume that it's still the ID of the desired panorama and use this panorama
new google.maps.StreetViewService()
.getPanoramaById('ag1bfIf47xUAAAGuxVUjCQ',
function(data,status){
if(google.maps.StreetViewStatus.OK===status
&&
data.location.latLng.toUrlValue()==fenway.toUrlValue()
){
panorama.setPano(data.location.pano);
}
});
Demo: http://jsfiddle.net/doktormolle/uwqvr5ee/
When it's sometimes not the desired panorama you may send a notification to the site-admin so that he may update the pano-ID.
I know it's not perfect, but it's the only approach I can think of so far(apart from a custom panorama)
I am using markerCLusterer V3 on a db file from Filemaker to generate a (semi-live) map of current delivery locations, based off of addresses. Grabbing the lat/long from Google and populating those
fields is no problem. Generating the map via markerClusterer is no problem. I am even hosting the JS locally so that I can change the maxZoom variable to break the clusters apart above max zoom, so that I can see multiple markers. However, with the markers at exactly the same lat / long, I can only see the last one entered. I would like to integrate OverlappingMarkerSpiderfier into this JS so that after I zoom in past the maxZoom, the markers would "spider" apart to see the markers (as an example, multiple pieces of equipment being delivered to the same address). I can't find any info here on on the web of how to do this. It's either that simple and I'm missing it or it hasn't been done yet. Thanks in advance for any help!
I'm using:
MarkerClustererPlus-2.0.14 and
OverlappingMarkerSpiderfier-version-??
At first only the clustering works, clicking on a cluster, zooms in but 2 or more markers on the exact same point still stay a cluster even when zoomed in to the maximum. Unfortunately no spiderfier showed up :-(.
But than a noticed the setMaxZoom() method on markerClusterPlus. When setting this too your appropriate zoom level (15 for me) spiderfier takes over beyond the zoom level. It looks like markerClusters says it ain't my business anymore from here on it's up to spiderfier :-).
Setting the max zoom will fix the problem:
minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);
but for viewing purposes you may want to create a clusterclick listener to prevent it from zooming in really close on a cluster of points at the same location (clicking a cluster set the bounds of the map to cover the points in the cluster; if all points are at the same location it will zoom in all the way, which tends to look bad):
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
map.setZoom(minClusterZoom+1);
});
Integrating Spiderfier JS into markerClusterer
Download the oms.min.js file from here
Download the markerClusterer.js and the image folder from here
In order to make both work together you only need to add a maxZoom to the clusterMarker object
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
(Zoomlevel 0 is the complete earth, and 20 is pretty close to the ground). This means that if you zoom into the map further as zoom level 15 (for example if you click on a cluster) then the clusters are not shown anymore. If you now click on markers that are on the exact same location (or close to each other) Spiderfier JS will trigger.
It follows now a minimal working example. I made some comments in the code so I think its self-explanatory, but here are some things to mention:
Replace YOUR_API_KEY with your api key
Make sure to load oms.min.js after you loaded the google maps api
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY">
</script>
<script src="oms.min.js"></script>
<script src="markerclusterer.js"></script>
<script>
window.onload = function() {
// cluster marker
var clusterMarker = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng( 50, 3),
zoom: 6,
mapTypeId: 'terrain'
});
// Create infowindow
var infoWindow = new google.maps.InfoWindow();
// Create OverlappingMarkerSpiderfier instsance
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true});
// This is necessary to make the Spiderfy work
oms.addListener('click', function(marker) {
infoWindow.setContent(marker.desc);
infoWindow.open(map, marker);
});
// Some sample data
var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];
for (var i = 0; i < sampleData.length; i ++) {
var point = sampleData[i];
var location = new google.maps.LatLng(point.lat, point.lng);
// create marker at location
var marker = new google.maps.Marker({
position: location,
map: map
});
// text to appear in window
marker.desc = "Number "+i;
// needed to make Spiderfy work
oms.addMarker(marker);
// needed to cluster marker
clusterMarker.push(marker);
}
new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
}
</script>
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>
Recommendation
If you are starting from scratch, I would recommend to use the JS Libary Leaflet. Because this library provides you with the LeafletMarkerCluster plugin which is basically markercluster with Spiderfier integrated, and a lot of other cool stuff.
Advantage:
Cluster look really nice
Leaflet really easy to use and looks pretty
You do not need to customize the code, because Spiderfier and markerCluster already integrated
Some fancy other stuff: Like showing the border on hover of a region where marker are spread.
You can freely choose your map-tiles-provider and are no longer restricted to google maps (possible providers here)
Downsites:
You may need to invest 30min to learn and use the Leaflet API instead of the Google API
If you want to use Google Map Tiles, then you need to use this plugin, because you are only allowed to use the Google Tiles when using the Google API. This plugin is a wrapper for the Google API.
Here is an example code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" />
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" />
<script src="leaflet/dist/leaflet.markercluster-src.js"></script>
<script>
$(document).ready(function(){
var tiles = L.tileLayer(***);//Depending on your tile provider
var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]});
var markers = new L.MarkerClusterGroup({
removeOutsideVisibleBounds: true,
spiderfyDistanceMultiplier: 2,
maxClusterRadius: 20
});
var markersList = [];
var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];
for (var i = 0; i < sampleData.length; i ++) {
var point = sampleData[i];
var location = new L.LatLng(point.lat, point.lng);
// create marker at location
var m = new L.Marker(location);
m.bindPopup("Number" +i); //Text to appear in window
markersList.push(m);
markers.addLayer(m);
}
var bounds = markers.getBounds();
map.fitBounds(bounds)
map.addLayer(markers);
}
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>
I came across this post because I was looking for the exact same thing, but lucky for me I have made it work!
I honestly didn't do anything special, I followed the integration guide for MarkerClusterer, and then followed the integration guide for OverlappingMarkerSpiderfier and they work flawlessly together.
When I click/zoom in on a cluster of properties that are all at the same address, initially it just shows the "top" marker, but when I click it, they Spiderfy just like you'd want them too!
What specific result are you getting when you try to use the two scripts together?
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
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).