Giter VIP home page Giter VIP logo

js-samples's Introduction

Test Release GitHub contributors Apache-2.0 Discord

js-samples

Description

Samples for the Google Maps JavaScript API.

The samples can be demoed at the official documentation site.

Development

Build

  1. npm i Install dependencies.
  2. npm run build Build all targets and update dist/ folder.

Test

  1. npm test Test outputs.
  2. (Optional) npm run lint Fix lint issues with npm run format
  3. (Optional) npm run test:playwright:playground:update-snapshots Update snapshots. This uses an custom env var to only to only update screenshots that differ from the previous ones (Playwright only supports none, all, or missing). To update all screenshots, use npm run test:playwright:playground:update-snapshots -- --update-snapshots. It's possible to target a single sample by using -g <sample-name>.

Run

  1. Start a server with all samples using npm start

Staging

For staging samples (not common), use Cloud Source Repositories which are controlled by an access control list.

  1. gcloud auth login
  2. git config --global credential.https://source.developers.google.com.helper gcloud.sh
  3. git remote add google https://source.developers.google.com/p/geo-devrel-javascript-samples/r/js-samples
  4. git push google
  5. git rev-parse --short HEAD or visit the bucket.

Explore

All samples can be explored at https://googlemaps.github.io/js-samples/.

Other resources

Support

These libraries are community supported. We're comfortable enough with the stability and features of the libraries that we want you to build real production applications on it.

If you find a bug, or have a feature suggestion, please log an issue. If you'd like to contribute, please read How to Contribute.

js-samples's People

Contributors

amuramoto avatar brendankenny avatar broady avatar cbaueratwork avatar chrisjshull avatar dependabot[bot] avatar domesticmouse avatar fuja0815 avatar googlemaps-bot avatar jeantimex avatar jlivni avatar jonfor avatar jpoehnelt avatar kaskaderc avatar kwnevarez avatar markmcd avatar medzviadziuk avatar miguev avatar nora-soderlund avatar regeter avatar rubioharo avatar saxman avatar semantic-release-bot avatar skaree avatar stephenfarrar avatar stephenmcd avatar wangela avatar willum070 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

js-samples's Issues

Error undefined /_without_region_tags.js while serving

Environment details

  1. googlemaps/js-samples
  2. MacOS Catalina 10.15.3
  3. devsite-2019-12-18
  4. yarn -v 1.22.0

Steps to reproduce

  1. Clone the repo, checkout the dev branch
  2. export GOOGLE_MAPS_JS_SAMPLES_KEY='...' environment variable
  3. yarn run serve

Stack trace

js-samples % yarn run serve
yarn run v1.22.0
$ bazel run :serve
INFO: Invocation ID: 590013e7-0043-4c21-985a-e3be954f98ae
INFO: Build option --action_env has changed, discarding analysis cache.
INFO: Analyzed target //:serve (1 packages loaded, 12405 targets configured).
INFO: Found 1 target...
ERROR: /Users/current/Projects/googlemaps/js-samples/samples/aerial-rotation/BUILD.bazel:16:1: error executing shell command: '/bin/bash -c 
        cp $1 $2

        sed -i 's/\/\/ \[START[A-Z_]* .*\]//g' $2
        sed -i 's/\/\/ \[END[A-Z_]* .*\]//g' $2
        sed -i 's/<\!-- \[START[A-Z_]* .*\] -->//g' $2
        sed ...' failed (Exit 1) bash failed: error executing command /bin/bash -c ... (remaining 4 argument(s) skipped)

Use --sandbox_debug to see verbose messages from the sandbox
sed: 1: "bazel-out/darwin-fastbu ...": undefined label 'azel-out/darwin-fastbuild/bin/samples/aerial-rotation/_without_region_tags.js'
sed: 1: "bazel-out/darwin-fastbu ...": undefined label 'azel-out/darwin-fastbuild/bin/samples/aerial-rotation/_without_region_tags.js'
sed: 1: "bazel-out/darwin-fastbu ...": undefined label 'azel-out/darwin-fastbuild/bin/samples/aerial-rotation/_without_region_tags.js'
sed: 1: "bazel-out/darwin-fastbu ...": undefined label 'azel-out/darwin-fastbuild/bin/samples/aerial-rotation/_without_region_tags.js'
Target //:serve failed to build
Use --verbose_failures to see the command lines of failed build steps.

Map throws errors and breaks if infoBoc.remove() is called

What steps will reproduce the problem?
1. create and add an InfoBox
2. execute myInfoBox.remove()
3. Zoom the map more than once.  The map no longer draws.  Firefox error 
console shows: 
"Error: a is null
Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/3/8/main.js
Line: 16"

Original issue reported on code.google.com by [email protected] on 4 Feb 2011 at 2:33

Attachments:

Marker Clustering library not stable

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 31 Mar 2011 at 5:17

Sample Angular X Implementation?

It seems strange that there's no reference on how to implement google maps services inside of Angular 2. I don't think it's as straight forward as dropping in the javascript link as there's lots of warnings against name space clashes, ideas would be helpful?

Rollup Removes Trailing Region Tag Comment

Babel moving the region tag comment after a closing bracket causes invalid JavaScript when combined with the includecode widget.

// [START foo_definition]
function  foo() {
}
// [END foo_definition]

becomes

// [START foo_definition]
function  foo() {
} // [END foo_definition]

This is an issue because these comments trigger the entire line to be removed from the documentation page such that it becomes

function  foo() {

Two Options:

  1. have babel strip these comments?
  2. pass a regex to includecode that allows the entire line to remain?

Clicking on custommarker fires map's click event before marker can stop it

What steps will reproduce the problem?
1. Go to
http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

2. Run this JavaScript (eg in Firebug console):
google.maps.event.addListener(map, 'click', function(event) {alert('map');
});
google.maps.event.addListener(overlay, 'click', function(event) {
alert('overlay'); });
3. Click on custom marker

What is the expected output?
The overlay (custom marker) getting the click event first, so it is able to
stop it from bubbling.

What do you see instead?
Map gets click event first. It's impossible to work out if marker has been
clicked at this point.

What version of the product are you using? On what operating system?
Google Maps JavaScript API v3: Custom Marker Demo
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9.2.5pre)
Gecko/20100429 Namoroka/3.6.5pre

Please provide any additional information below.


Original issue reported on code.google.com by dave1010 on 30 Apr 2010 at 12:22

Not working on iphone

I tried to run your exaple demo on iphone, but it doesnt seem to work.It
keeps saying "Detecting Your Location", and hangs much above my city.
When i loaded this demo, it asked me do i want this url to detect my
location and i said yes.

Can you please tell what can be the problemn.

Original issue reported on code.google.com by [email protected] on 9 Jul 2009 at 11:53

Not working on South Korea

What steps will reproduce the problem?
1. Setting saturation to -100
2. Zooming on South Korea
3. Still in oroginal colors

What is the expected output? What do you see instead?

The expected outpout : South Korea with 'gray' color
Instead : oroginal colors

Is there a way to set the saturation to -100 pour South Korea or an other way 
to have 'gray' effect on South Korea

Original issue reported on code.google.com by [email protected] on 13 Jul 2012 at 10:02

Attachments:

Incorrect geocoded data for 139-29, 88th Avenue, Jamaica, NY 11435

What steps will reproduce the problem?
1. Search 139-29, 88th Avenue, Jamaica, NY 11435
2. See the Geocoded data
3. Search 139-31, 88th Avenue, Jamaica, NY 11435
4. See the Geocoded data and compare with the result for step 2

What is the expected output? What do you see instead?

Geocoded data should match for the results from step 2 and 4.

What version of the product are you using? On what operating system?
Android

Please provide any additional information below.

Attached please see the details of the issue.


Original issue reported on code.google.com by [email protected] on 15 May 2014 at 5:09

Attachments:

Is there a way to save the JSON code and open it in the wizard later on?

I created a stylized map with the map wizard and want to be able to save the 
JSON code that I am provided with and edit it in this wizard at a later point 
in time. It doesn't let me paste the code into the JSON code screen. Is there a 
way to input the code and continue editing the style? Any help would be 
appreciated!

Thank you!

Original issue reported on code.google.com by [email protected] on 24 Oct 2013 at 5:47

panMap function doesn't treat bounds as number

What steps will reproduce the problem?
1. in function InfoBox.prototype.panMap
2. at line "var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;"
3. position.lng() is treated as a string, so subsequent addition works as
string does and simply be appended at the end of position.lng() value

What is the expected output? What do you see instead?
I should see map pan to the left when infowindow right bound is bigger than
map's right bound. Instead I see infowindow be trunked (as if map has an
overflow hidden property)

What version of the product are you using? On what operating system?
I downloaded javascript used in this demo:
http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-cu
stom.html

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 31 Aug 2009 at 1:48

local-context-home e2e test fails with 403

INFO: From Testing //e2e:local-context-home:
  ● sample %s should be correct › loads map without error in logs

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 8

    - Array []
    + Array [
    +   Object ***
    +     "level": "SEVERE",
    +     "message": "https://lh3.googleusercontent.com/places/ABKp1IqHPE1Gztqg9Wng8l_GvZw6HRQi2xbeTVjLn5ipKRC2ASdHkPN13vW31S9-2vCjIuXNjgArBiBYaWffflCF0W5ovGIh1MmCmlA=s1600-w120 - Failed to load resource: the server responded with a status of 403 ()",
    +     "timestamp": 1602072650439,
    +     "type": "",
    +   ***,
    + ]

      74 |       .get("browser");
      75 | 
    > 76 |     expect(logs.filter(l => l.level.name_ === "SEVERE")).toEqual([]);
         |                                                          ^
      77 | 
      78 |   ***);
      79 | ***);

      at Object.<anonymous> (e2e/selenium.test.js:76:58)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.894 s
Ran all test suites within paths "e2e/selenium.test.js".

https://github.com/googlemaps/js-samples/runs/1220269237?check_suite_focus=true

maps api style wizard no longer updates with new style

What steps will reproduce the problem?
1. go here : http://goo.gl/Y43Hm
2. apply a style
3. map no longer updates with new style

What is the expected output? What do you see instead?
the map should change to the new style.  nothing happens the map stays in the 
default mode

What version of the product are you using? On what operating system?
I am using Ubuntu 11.04.  Tried on Chrome 12.0.742.124 and Firefox 5.01

Please provide any additional information below.

this is a really useful tool.  thanks.

Original issue reported on code.google.com by [email protected] on 27 Jul 2011 at 2:52

Streetview exists but not working

all examples of rendered google map codes have the street view button visible but now working if clicked. is there a way to remove it or make it work?

Satellite layer

When using the Satellite layer, the map makes 4 other requests with Map layer, like there are open both Layers on the same time

Required File: .gitignore

The following file is missing from this repository: .gitignore

Do not edit below:
meta: [.gitignore]

According to Web Content Accessibility Guidelines (WCAG) - every iframe must have a title attribute

My first bug report, I hope I will clarify my points :)

When doing some accessibility reviews I've noticed that title attribute for Google Maps iframe embeds is missing.

  1. Checked documentation - unable to find some description about importance of title (added a comment on the site about it) - developers and end-users should understand the value the title is providing for assistive technologies.
  2. Checked multiple examples - it looks like none of them is using and/or mentioning title (I may missed some, but in general I think it is missing),
  3. Tested online version of Google maps -> share -> Embed and I think there we should have some smart defaults for the title (mentioned below) and the users could maybe edit the title with some simple form (required title input for example).

Environment details

  1. Have not checked all examples but it looks like all <iframe> elements are missing title attribute.
  2. Tested online Google maps embed UX and it is missing the title attribute

Steps to reproduce

  1. open example and check iframe in the DOM tree / or use a accessibility testing tool (like aXe or similar) / use a screenreader

Code example

When generating / showing iframe with Google maps we should provide a title attribute for it (it should be meaningful of course - for example "Showing {name of place / coordinates } on Google Maps" or something that gives it a good description;

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4027.4752040795925!2d9.580445431436969!3d59.68729112714207!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4640c5aca7b86cdf%3A0x826e7df571bc58fb!2sLinnertdammen!5e0!3m2!1sen!2sno!4v1596010580601!5m2!1sen!2sno" width="300" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" title="Showing map of Linnertdammen (Kongsberg, Norway, Europe) on Google Maps"></iframe>

Links with references;

Thanks!

About extracting a sample

When I run googlemaps-js-samples init map-simple destFolder, I download all packages including build tools every time.
How can I run the googlemaps-js-samples using pnpm or yarn package manager to link the previous downloaded packages instead of downloading everything?
Can I choose the package manager with googlemaps-js-samples?

breaking typo in styledmaps wizard

What steps will reproduce the problem?
1. Follow the instructions here: 
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
2. Your map will not display your custom styles.

To fix this:
3. Pass the JSON to `MapOptions.styles` instead of `MapOptions.style`

Just need to add an 's' to the instructions so people trying it out will not be 
misled and think it is broken.

Corrected instruction text below
====================

How to use the Styled Maps Wizard

Navigate to the map region you wish to use to preview your style. Jump to a 
particular location using the Enter a location field in the top right.
Select a type of feature to style in the Selectors panel.
If you only wish to style the Geometry or Labels for the selected feature type, 
select the required Element Type.
Select the combination of Stylers to apply to the selected feature type.
Once you are happy with the styling of the feature type, click the Add button 
in the Map Style panel to save the style and create a new style to work on.
Repeat Steps 2 to 5 to build up the set of styles for your map. Styles are 
applied in the order they are listed in the Map Style panel.
Select an existing style in the Map Style panel to edit it.
Delete a style by clicking on the trashcan icon to the right of the style 
number.
When you are happy with your Styled Map, click the Show JSON button to display 
the JSON object to pass to the `styles` property of your `MapOptions` object in 
order to apply the style to a Maps API v3 Map.
To generate an example map with this style using the Static Maps API, click the 
Static Map button.
For more information on Map Styling, please see the Maps API v3 Documentation, 
and Static Maps API Documentation.

Original issue reported on code.google.com by [email protected] on 2 Mar 2015 at 7:27

DrawingTools: Maximum call stack size exceeded

What steps will reproduce the problem?
1. Go to 
http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-to
ols.html
2. Draw a polygon 
3. When you finished you get the error "Uncaught RangeError: Maximum call stack 
size exceeded"

What is the expected output? What do you see instead?
Polygon never completes

What version of the product are you using? On what operating system?
chrome 39.0.2171.71 m

Please provide any additional information below.

I find out that when you call drawingManager.setDrawingMode(null) it fires the 
overlaycomplete and polygoncomplete events and this cause a endless loop.

Original issue reported on code.google.com by [email protected] on 20 Jan 2015 at 6:41

samsung zoom tablet support for gmaps v3

What steps will reproduce the problem?
1. Start Samsung Zoom
2. Run sample application of google map.
3. It is not running.

What is the expected output? What do you see instead?
It should run.

What version of the product are you using? On what operating system?
Android

Please provide any additional information below.
samsung zoom tablet support

Original issue reported on code.google.com by [email protected] on 31 Mar 2011 at 5:16

Xml Parsing - downloadURL

What steps will reproduce the problem?
1. Refresh  the url 
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/xmlparsing/downloa
durl.html?r=14


What is the expected output? What do you see instead?
The marker will be populate

What version of the product are you using? On what operating system?
I am using windows XP with chorme.

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 22 Nov 2011 at 1:34

Required File: .gitignore

The following file is missing from this repository: .gitignore

Do not edit below:
meta: [.gitignore]

Visibility (Simplified) Not removing text

What steps will reproduce the problem?
1. Check Visibility
2. Check Simplified
3.

What is the expected output? What do you see instead?
Expected all the text from map to be hidden(Simplified). It used to remove it 
before but now all it does it remove borders of road and houses.

What version of the product are you using? On what operating system?
I am using this 
(http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html) 
on Windows 7 & 8.1/

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 18 Sep 2014 at 9:28

Not working in IE 8

What steps will reproduce the problem?
1. Load geolocate.html

What is the expected output? What do you see instead?

I expect a location (or a clean indication that the location could not be 
found). Instead I get a javascript error:
'google.gears.factory' is null or not an object - http://gmaps-samples-
v3.googlecode.com/svn/trunk/geolocate/geometa.js - 63

What version of the product are you using? On what operating system?

trunk, IE8, Win7

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 11 Apr 2010 at 6:20

Smart Infowindow appearing in the wrong position

I am trying to implement the smart infowindow onto Google Maps on the site I am 
working on but for some reason the infowindow is getting the wrong position (as 
shown in the attached image). It seems to be the top and left position in the 
CSS being calulated incorrectly.

I create the markers with the following code:
for (var i = 0; i < data.locations.length; i++) {
   var dataPhoto = data.locations[i];
   var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);

   latlngbounds.extend( latLng );

   var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://www.irishcottageholidays.com/images/cottage1.png'
   });  

   listenMarker(map,marker,InfoWindow,dataPhoto.mID)

   markers.push(marker);
}

I then create the smart infowindow:
function listenMarker (map,marker,InfoWindow,mID){
   google.maps.event.addListener(marker, 'click', function() {
      load_content(map,this,InfoWindow,mID);
   });
}

function load_content(map,marker,InfoWindow,mID){
   var $j = jQuery.noConflict();

   $j.ajax({
      type : 'GET',
      url : '/ajax/map_popup.asp',
      data: {
         mID : mID
      },
      success: function(result){
         new SmartInfoWindow({position: marker.getPosition(), map: map, content: result});
      }
   });
}

Thanks in advance for the help.

Original issue reported on code.google.com by [email protected] on 25 Nov 2013 at 11:39

Attachments:

Display Paths into textbox


Is it possible to display the paths[lat,lng] into textbox or json

 shape1 : {path array }
 shape2 : {path array }

Original issue reported on code.google.com by [email protected] on 22 Oct 2012 at 3:46

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.