Skip to content

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

@yasulab

Description

@yasulab

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions