We've got a big problem with all the pages (about 40) on our site that use Google Maps.
Google search robots are indexing "Sorry we have no imagery available", for our pages ie it actually believes that is our content (In Webmaster Tools one of our top content keywords is "Sorry"
We have done lots of tests and the google maps always loads for us; so really don't know what the issue is.
We use a separate js file linked to our html
An example of the js is:
var map = null;
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(53.5, -1.78),
mapTypeControl: false,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add marker to the map
var point = new google.maps.LatLng(53.34932, -1.56504);
var marker = createMarker(point,'1. Blacka Moor<br>An excursion onto the Moors west of Sheffield and making the most of the fine riding in the area - a bona fide Peak District Mountain Biking Classic.<br>Route Grade: medium. Distance: 16.5km')
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50),
maxWidth: 300
});
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
and in our html head we have:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript" src="assets/googlemapscripts/darkpeakscript.js"></script>
<script type="text/javascript">
window.onload = function () {
initialize();
}
</script>
and in the body
<div id="map_canvas" style="width: 630px; height: 450px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 0.8em;"></div>
Thanks
Rich
My assumption is that googlebot won't fully evaluate all code on page, but will use heuristics as well. Base on this assumption I did the following:
Create a div with a "random" ID (for the map) and style="display: none;"
Create a noscript tag with an img tag in it with the SAME "random" ID (i used a static map image as fallback here)
Create a (custom) javascript function where the unique ID must be passed to initialize your map AND toggle the display on the map-element.
So far, none of the maps "sorry we have no imagery" gets indexed.
Related
When I put my object (points) in the same script as the google maps API it works fine. But when I move the object to its own script on top it says "points is not defined".
I need to have the object in the top script (its actually coming from a database).
See working demo: https://price-points.web.app/
This is a Svelte project.
<script>
export const prerender = true;
let showMap = false;
//How can I make this work without the setTimeout?
setTimeout(function(){showMap = !showMap}, 1);
</script>
<!-- Google Maps API -->
<div>
<div id="map"></div>
<script>
//If points object is here it works fine.
//If points is defined in top script it says "points is not defined"
//My ACTUAL points object comes from a database and needs to be in top script.
let points = {
sanFrancisco: {
lat: 37.7749,
lng: -122.4194,
price: 123.45
},
losAngeles: {
lat: 34.0522,
lng: -118.2437,
price: 567.89
}
}
function initMap() {
const california = {lat: 36.7783,lng: -119.4179};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: california,
});
Object.values(points).forEach(({ lat, lng, price }) => {
const marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
label: `$${price}`,
icon: { url: 'https://i.imgur.com/ECXgKpB.png', scaledSize: new google.maps.Size(60,35), labelOrigin: new google.maps.Point(30, 15)}
});
});
}
window.initMap = initMap;
</script>
{#if showMap}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" defer async></script>
{/if}
</div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
The script in Svelte components is scoped (it is implicitly a module which requires import/export), you have to set window.points to make variables available globally.
Note that in SvelteKit you cannot access window during server-side rendering, so you probably should move the assignment into onMount. In general you should not have multiple script tags in the first place, maybe you are fighting the wrong problem.
If I have the contents of a KML in a file and want it to show on the google map without specifying a URL, is it possible? Say if I have a variable that contains a string of the entire KML, can I load it into Google Maps API v3 somehow or is this not possible?
It isn't possible with the native Google Maps Javascript API v3. It can be done with the parseKmlString method of the third party library geoxml3
[Disclaimer: I am the current maintainer of the geoxml3 library]
Code snippet:
var kmlString = '<kml><Document><name>Massachusetts Cities</name><Folder><Placemark><name>Boston</name><description>Boston is the capital of and largest city in Massachusetts. The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description><Point><coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates></Point></Placemark><Placemark><name>Worcester</name><description>Worcester is known as the "Heart of the Commonwealth" due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description><Point><coordinates>-71.80229299737233,42.26259300656061,145.2545892926215</coordinates></Point></Placemark><Placemark><name><![CDATA[M]]></name><description><![CDATA[the letter M]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.62467956542969,42.3280930282246 -71.62742614746094,42.25088477477569 -71.60476684570312,42.249868245939346 -71.6033935546875,42.29204042491614 -71.575927734375,42.25291778330197 -71.5594482421875,42.25190128722991 -71.53884887695312,42.28594498725423 -71.53678894042969,42.249868245939346 -71.51206970214844,42.249359975377885 -71.51893615722656,42.33215399891373 -71.55876159667969,42.33164639191572 -71.57180786132812,42.285437007491545 -71.59584045410156,42.32910829547648</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[A]]></name><description><![CDATA[the letter A]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.41044616699219,42.3346919724542 -71.37130737304688,42.3357071331938 -71.34452819824219,42.251393033050576 -71.37062072753906,42.249868245939346 -71.38229370117188,42.279340930853145 -71.40838623046875,42.279340930853145 -71.422119140625,42.248851700720934 -71.45370483398438,42.248851700720934,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name></name><description><![CDATA[]]></description><LineString><coordinates>-71.32186889648438,42.385937107381146 -71.69540405273438,42.379850764344134 -71.707763671875,42.14813264235833 -71.1968994140625,42.15118709351198 -71.32186889648438,42.385937107381146</coordinates></LineString></Placemark></Folder></Document></kml>'
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: {
lat: 42,
lng: -70
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true
});
geoXml.parseKmlString(kmlString);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 750px;
height: 600px;
margin: 0;
padding: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/polys/geoxml3.js"></script>
<div id="map_canvas">
Hy guys, i'm studing the meteorjs and i got some problems to see the things on firefox. On google chrome, everythings gonna well and i can see everything without errors.
My code is:
/-->server/server.js
Meteor.publish('places', function () {
return Places.find();
});
/-->model.js
Places = new Meteor.Collection('placesNew');
Places.allow({
insert: function(){
return false;
},
update: function(){
return false;
},
remove: function(){
return false;
}
});
Meteor.methods({
createPlace: function(options){
check(options, {name: NonEmptyString, latitude: NonEmptyString , longitude:NonEmptyString , color: NonEmptyString});
return Places.insert({name:options.name, latitude: options.latitude, longitude: options.longitude, color: options.color});
},
removePlace: function(options){
return Places.remove(options.id);
}
});
var NonEmptyString = Match.Where(function (x) {
check(x, String);
return x.length !== 0;
});
/-->services.js
var map;
renderize_map = function (places){
var mapOptions = {
center: new google.maps.LatLng(47.36865 , 8.539183),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map= new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
places.forEach(function (place) {
var pinColor = place.color.replace("#","");
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.latitude, place.longitude),
title: place.name,
icon: pinImage,
map: map
});
});
}
/-->client/places_list.js
Meteor.subscribe('places');
Template.places_list.places = function () {
return Places.find({},{sort:{name: -1}});
}
Template.places_list.events({
'click #add':function() {
options ={};
options.name = document.getElementById('name').value;
options.latitude = document.getElementById('latitude').value;
options.longitude = document.getElementById('longitude').value;
options.color = document.getElementById('color').value;
Meteor.call('createPlace',options, function(error,place){
if(error){
console.log("Não Foi possível inserir");
}
});
renderize_map(Places.find({},{sort:{name: 1}}));
},
'click .plc_remove': function(obj){
options={};
options.id=obj.toElement.attributes['data-ref'].value;
Meteor.call('removePlace',options, function(error,place){
if(error){
console.log("Não Foi possível inserir");
}
});
renderize_map(Places.find({},{sort:{name: 1}}));
}
});
Template.maps.rendered = function() {
renderize_map(Places.find({},{sort:{name: 1}}));
}
/-->client/places_list.css
/* CSS declarations go here */
#map-canvas{
width: 500px;
height: 500px;
}
/-->client/places_list.html
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
<header>
<h1>TableList</h1>
{{> places_list}}
{{> maps}}
</header>
</body>
<template name="places_list">
<div class"place-list-form">
<input type="text" placeholder="Insert a place here" value="{{name}}" id="name"/><br>
<input type="text" placeholder="Insert a Latitude here" value="{{latitude}}" id="latitude"/><br>
<input type="text" placeholder="Insert a Longitude here " value="{{longitude}}" id="longitude"/><br>
<input type="text" placeholder="Insert a Color here " value="{{longitude}}" id="color"/>
<button id="add">Add point</button>
</div>
<div class"place-list-container">
<ul>
{{#each places}}
<li> {{ name}} | <a class="plc_remove" data-ref="{{_id}}" href="#">x</a> | </li>
{{/each}}
</ul>
</div>
</template>
<template name="maps">
<div id="map-canvas"></div>
</template>
The errors are:
SyntaxError: missing } after function body
http://localhost:3000/packages/livedata.js?a3d111217f95d5af907302198a85413d1acbaf05
Line 1766
TypeError: Package.livedata is undefined
http://localhost:3000/packages/mongo-livedata.js?a3509c5f9f4ed6ded19eaac97c69c2a91d81df81
Line 28
TypeError: Package.livedata is undefined
http://localhost:3000/packages/global-imports.js?fbb54e05f02190869755c48bbc5e3bd9f17811b4
Line 7
ReferenceError: Template is not defined
http://localhost:3000/client/template.places_list.js?ee7af8e7be9b55207b7bef609fa51cb0e5f513a9
Line 1
TypeError: Meteor.subscribe is not a function
http://localhost:3000/client/places_list.js?6a2a131bfee6da3c6e08cee25711a90317cb4a4e
Line 1
TypeError: Meteor.Collection is not a constructor
http://localhost:3000/model.js?9eed9b90a309156348195efef61705bab5494768
Line 1
ReferenceError: Spark is not defined
http://localhost:3000/client/template.places_list.js?ee7af8e7be9b55207b7bef609fa51cb0e5f513a9
Line 1
Can anyone helpme?
Thanks!
I just copy and pasted all your code into a project and it works for me on both Firefox (version 19.0.2 on OSX) and Chrome. Or at the very least it loads everything and I could add a location that would be visible as a name in the other browser, it didn't add a pin to the map.
The errors you are getting are pretty fundamental errors suggesting that some of the essential built-in packages aren't loading correctly. I don't see why this would only be an issue in one browser though. If you view source in your browser is the list of packages the same in both Chrome and Firefox?
As a suggestion I would try editing the packages file (.meteor/packages from your project root directory). Try removing all the packages which will obviously cause the app to stop working and adding the default ones again which are:
standard-app-packages
autopublish
insecure
preserve-inputs
Beyond that, do other meteor apps run ok in Firefox? If not look at what add-ons and settings you have. If it's just this app and other people can get it working in Firefox then all I can think of is remaking the project copying and pasting your files in.
EDIT: Solved:
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
I'm a cut-and-paste coder and while I intend on learning the syntax better, I'm on a deadline for now so I'm asking for help. I have googled extensively and while there are solutions to my problem, I haven't found one that works for me. My KML file is hosted on Google Drive so instead of a file url there is a driveFileId.
If you want to preserveViewport, you normally just add it to the layer object and set it to 'true'. However my KML file won't let me override its default zoom level where the bounds fit the screen no matter how I write it. Can someone help? This is the working object:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
EDIT: Here's the whole thing. Perhaps you can see if there are redundancies or contradictions that are causing this.
<!DOCTYPE html>
<html<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Aexamplekey0&sensor=true"></script>
<style>
#map {
width: 310px;
height: 410px;
}
</style>
<script>
window.onload = function () {
var latlng = new google.maps.LatLng(53.385873, -1.471471);
var styles = [
{
//whatever
}
]
var myOptions = {
zoom: 15,
disableDefaultUI: false,
styles: styles
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg"});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Based on the current release API documentation, you should be able to set the preserveViewport option in the object you instantiate:
var layer = new google.maps.KmlLayer({
driveFileId: "0Bexampleg",
preserveViewport: true});
layer.setMap(map);
Without further information, such as a URL to your KML data, information about your map center and zoom, there's not much further that can be said.
GOT IT!
Here it is:
var opt = { minZoom: 11, maxZoom: 15 };
map.setOptions(opt);
And then in your the myOptions object you set your default zoom. Solution found here: Google Maps v3 - limit viewable area and zoom level
thanks to #ChrisV. I don't know why but the KML Layer won't allow any permutation of the original preserveViewport code.
I'd like to display a Google Map overlaid with two Fusion Tables layers. The code below works perfectly if I just copy it into a text editor, save the file as map.html, and open it in my browser. But when I put it in a post on my WordPress-themed site, the underlying map is hidden by the Fusion Tables layers. Those layers aren't totally opaque: I can see both of them at the same time. I just cannot see the underlying map.
Whenever I zoom or pan the map, the underlying map appears briefly before the Fusion Tables layers are drawn over it. I suspect that there is a style setting at fault. Do you know how to get the map to display properly?
I'm using WordPress version 3.0.4 with the Gazette theme by woothemes; the site is http://www.wisconsinwatch.org.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'), {
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
Thanks!
Wordpress wraps the content of your post in a <div class="entry"> block, which your theme uses to provide the proper styling. Since the javascript that prepares the Google map for display returns an image, the relevant part of the Gazette style sheet is:
.entry img {
padding: 4px;
border: 1px solid #dddddd;
background-color: #FFFFFF;
}
Specifically, the background-color setting causes the overlaid Fusion Tables layers to be drawn with an opaque background, which then hides the underlying map. You need to define a new class in your style sheet (let's call it "map") that draws images with a transparent background:
.map img {
background-color: transparent;
}
And then wrap your javascript in a <div class="map"> block, like so:
<div class="map">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
<script type="text/javascript">
var fracmap = new google.maps.Map(document.getElementById('gmap'),
center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
zoom: 7,
mapTypeId: 'hybrid'
});
var layer0 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695847
},
});
layer0.setMap(fracmap);
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: 2695779
},
});
layer1.setMap(fracmap);
</script>
</div>
</div>