I like this info card you get in the left top corner of a card you embed. Is there a possibility to display this card if I use the API v3. Or do I have to use the embed API of Google Maps?
Because I like to block the use of the scrollwheel and some other options of the API which I can not use with the embedding API.
I think you can use the Custom Save Widget.
original:
https://developers.google.com/maps/documentation/javascript/examples/save-widget
archive.org:
https://web.archive.org/web/20160331182749/https://developers.google.com/maps/documentation/javascript/examples/save-widget
the save-widget is going away, but I think the way to show the box should be still valid.
<!DOCTYPE html>
<html>
<head>
<title>Custom Save Widget</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#save-widget {
width: 300px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
background-color: white;
padding: 10px;
font-family: Roboto, Arial;
font-size: 13px;
margin: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="save-widget">
<strong>Google Sydney</strong>
<p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
"living wall" made of plants, a tire swing, a library with a nap pod and some amazing
baristas.</p>
</div>
<script>
/*
* This sample uses a custom control to display the SaveWidget. Custom
* controls can be used in place of the default Info Window to create a
* custom UI.
* This sample uses a Place ID to reference Google Sydney. Place IDs are
* stable values that uniquely reference a place on a Google Map and are
* documented in detail at:
* https://developers.google.com/maps/documentation/javascript/places#placeid
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958},
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
],
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var widgetDiv = document.getElementById('save-widget');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);
// Append a Save Control to the existing save-widget div.
var saveWidget = new google.maps.SaveWidget(widgetDiv, {
place: {
// ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: {lat: -33.866647, lng: 151.195886}
},
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker = new google.maps.Marker({
map: map,
position: saveWidget.getPlace().location
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
Related
I'm using the google maps api:
https://developers.google.com/maps/documentation/javascript/tutorial?_ga=2.192156522.1955755213.1592725672-591919557.1592514255
and I have copy pasted the following code into my index.html, and added my API key in the appropriate place.
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
(function(exports) {
"use strict";
function initMap() {
exports.map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
exports.initMap = initMap;
})((this.window = this.window || {}));
</script>
Yet, the map doesn't show. What am I doing wrong?
I also see the following in the console that might be relevant:
Unhandled Promise Rejection: InvalidValueError: Map: Expected mapDiv of type Element but was passed null.
But I do see the div in the dom:
<div id="map"></div>
I'm facing a problem with google maps API as one of the customers of my company asked for the alt attribute on the marker image.
I cannot find anything in official Google documentation (i.e.: https://developers.google.com/maps/documentation/javascript/custom-markers) and cannot even find anything elsewhere about the alt text for google maps marker.
Personally, I don't even know if it has some effect on the SEO (as stated by a third-party company that the customer referred to, as they ran some SEO checks on their website).
I tried to use the examples from google and tried to add a hypothetical alt instruction, but, of course, it's not being picked up.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = { lat: -25.344, lng: 131.036 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 4, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru',
alt: 'my alternate text goes here'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=***********************&callback=initMap" async defer></script>
</body>
</html>
The after-rendering result is similar to the following:
<img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">
Is there any way I can get something like:
<img alt="my alternate text goes here" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">
UPDATE:
1) I don't think it will have any impact on SEO: the markers are dynamically rendered and afaik Google only parses static HTML and some content rendered by JS but I haven't seen it run Maps API calls, I'd have noticed it in my API traffic). It would be probably much more helpful to generate a page summary in JSON-LD: https://json-ld.org/
2) If you MUST add an alt tag (I don't see why) or you want to display a hover tooltip next to the marker, you have to look at extending the google.maps.OverlayView() to create your own custom marker: this object has a draw prototype method that will allow you put anything on the map, any way you want it: an <img alt=...>, a <div> etc.
https://developers.google.com/maps/documentation/javascript/reference/overlay-view
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
3) Since you rely on Google correctly parsing JS output: why not try to add the alt tag post-factum (after map load) like (jQuery) $('img[alt=""]').attr('alt','Now I fixed it') ;)
I have created a map which you can see here http://summitaccounting.ca/about-us
I have created the API key twice with the same result
I have pinpointed the property. However, I cannot get rid of the gray grid over the top of the map. Here is the code I am using.
Any help would be appreciated.
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.115, lng: -114.894};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_fWUOsy0ygeKqSbdfiaK7_WKCrXCkDgc&callback=initMap">
</script>
</body>
</html>
In your template.css file, you have this style declaration:
a img,fieldset,img{
border:none;
padding:5px 10px !important;
}
It's that padding that is messing with your google maps. You're going to need to rework some of this, or try to override it with even more !important styles for the google maps. ugh.
I am just following the tutorial on google's website on how to use their API. I found this code and am trying to get it to work for any other country than the default but it isn't:
<!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: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=personalKey&sensor=false&language=ar®ion=ES">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
from what it says this should work simply. I am trying to get Spain to display on map rather than current choice.
The link am following: https://developers.google.com/maps/documentation/javascript/basics
Thanks,
Change the values you're passing to google.maps.LatLng() to some close to where you want to display (eg., goggle.maps.LatLng(40.813797402839086, -3.62546328124995) for Madrid, according to LatLng).
You are trying to set the position of the map by setting the region. You still need to change the co-ordinates to those of Spain.
Try: 40.6986° N, 3.2949° W
When I click to the embedded Google Maps API of the following Web Page: http://ada.kiexpro.com/html/list.html (click 地圖 at the top-right corner).
It displays:
This web site needs a different Google
Map API key. A new key can be generted
at http://code.google.com/apis/maps/.
Sorry but I've never used this application before. Do I have to just generate a new code in order to solve the problem? Or there are another problems?
Yes, follow the link. Each distinct domain needs its own API key.
This works normally for me
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>