New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

トップページにCoderDojo Mapを埋め込む #32

Open
yasulab opened this Issue Dec 12, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@yasulab
Copy link
Member

yasulab commented Dec 12, 2016

coderdojo map

cf. https://coderdojo.com/

yasulab がもらった情報

  • ワークアラウンドとしてiframeがある (後述)
  • ただ、もうちょっと良いやり方を現在検討中
  • Geolocation の取得 -> iframe で描画? 🤔

iframeを使った埋め込み方法 (引用)

Regional Body iFrame Map Documentation

Main:

The purpose of this document is to explain how you as a regional body can add a google map iframe that will display all Dojos within your region and embed said iframe into your respective regional body website.

Pre-requisites:

  • Latitude & Longitude Coordinate of your Region.

    • Step 1: Simply Google your "Latitude and Longitude of "

    • Step 2: Copy and Paste both numeric values.

Set-Up:

Here is an example of the a Google Map of Dojos that exist in Ireland where the map of Dojos centres on Ireland.

Example Url:

<table>
  <tr>
    <td>https://zen.coderdojo.com/embedded/dojos-map/lat/53/lon/-9.4556446?zoom=7</td>
  </tr>
</table>

Notice that the url has the following

  • /lat/53 - (First Numeric Value of Latitude)

  • /lon/-9.4 (Second Numeric Value of Longitude)

  • zoom=7 (Zoom Level of the Google Map)

If you replace the "lat" number and “lon” number of the url above with the values of your region that you pasted and then refresh the map it will change to your region.

You can increment or decrement the value of "zoom=7" to Zoom In or Zoom Out of the map.

E.g "zoom=8" will increase the zoom level of the map. Decrease will decrease the zoom.

To Embed Map:

Use an iFrame to embed the map into your wordpress regional body website. The following is an example of an iFrame that will embed a Google Map of the region of Ireland with a map that is 600 pixels wide, 150 in height and has no frame or borders.

Example code:

<table>
  <tr>
    <td><iframe 
src="https://zen.coderdojo.com/embedded/dojos-map/lat/53/lon/-9.4556446?zoom=7
" width="600" height="450" frameborder="0" style="border:0">
</iframe></td>
  </tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment