In-game Google Map

K.V.

You'll need to get a free Google API Key from here:
https://developers.google.com/maps/documentation/javascript/get-api-key

That key must be entered as the value of the attribute: game.google_map_key for this script to work.

You can change the values of the lng and lat variables in the JS script myMap() to change the targeted location.

<!--Saved by Quest 5.7.6613.24985-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Google Map">
    <gameid>40de2a9a-81c6-4229-a64a-17f1befed28c</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
    <attr name="google_map_key">INSERT_YOUR_GOOGLE_API_KEY_HERE</attr>
    <start type="script">
      JS.eval ("function myMap() {var lat = 51.508742;var lng = -0.120850;var mapProp= {center:new google.maps.LatLng(lat,lng),zoom:5,};var map=new google.maps.Map(document.getElementById('googleMap'),mapProp);};")
    </start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <isroom />
    <description type="script"><![CDATA[
      if(HasAttribute(game,"google_map_key")){
        msg ("<div id='g-map-container' <h3>Example Map</h3><div id='googleMap' style='width:100%;height:400px;'></div><script src='https://maps.googleapis.com/maps/api/js?key="+game.google_map_key+"  &callback=myMap'></script>")
      }
      else{
        msg("The map failed to load!")
      }
    ]]></description>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
</asl>

https://www.w3schools.com/graphics/google_maps_intro.asp


NOTE:

I'm not sure if the key has an expiration date or not, but I did read that it can only be used so many times per day. (I advise you to peruse the site where you get the key, just to be sure you are aware of all the details.)


K.V.

UPDATE:

Now you can enter the latitude and longitude attributes for each room (as strings), and the player.changedparent script will change your location on the map.

<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="Google Map">
    <gameid>40de2a9a-81c6-4229-a64a-17f1befed28c</gameid>
    <version>0.2</version>
    <firstpublished>2018</firstpublished>
    <attr name="js_script"><![CDATA[<br/><br/><br/><br/><br/>]]></attr>
    <attr name="google_map_key">YOUR_GOOGLE_MAP_KEY_GOES_HERE!!!</attr>
    <start type="script"><![CDATA[
      ClearScreen
      if (HasAttribute(game,"google_map_key")) {
        JS.eval ("$('#googleMap').html();")
        msg ("<div id='g-map-container'><div id='googleMap' style='width:100%;height:400px;'></div><script src='https://maps.googleapis.com/maps/api/js?key="+game.google_map_key+"  &callback=myMap'></script>")
        JS.eval ("function myMap() {var lat = "+game.pov.parent.latitude+";var lng = "+game.pov.parent.longitude+";var mapProp= {center:new google.maps.LatLng(lat,lng),zoom:20,};var map=new google.maps.Map(document.getElementById('googleMap'),mapProp);};")
      }
      else {
        msg ("The map failed to load!")
      }
    ]]></start>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <latitude>51.508742</latitude>
    <longitude>-0.120850</longitude>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
      <feature_startscript />
      <attr name="_initialise_" type="script">
        msg ("")
      </attr>
      <changedparent type="script"><![CDATA[
        if (game.pov = this) {
          if (IsDefined("oldvalue")) {
            OnEnterRoom (oldvalue)
          }
          else {
            OnEnterRoom (null)
          }
          if (game.gridmap) {
            MergePOVCoordinates
          }
        }
        this.hasbeenmoved = true
        ClearScreen
        if (HasAttribute(game,"google_map_key")) {
          JS.eval ("$('#googleMap').html();")
          msg ("<div id='g-map-container'><div id='googleMap' style='width:100%;height:400px;'></div><script src='https://maps.googleapis.com/maps/api/js?key="+game.google_map_key+"  &callback=myMap'></script>")
          JS.eval ("function myMap() {var lat = "+game.pov.parent.latitude+";var lng = "+game.pov.parent.longitude+";var mapProp= {center:new google.maps.LatLng(lat,lng),zoom:20,};var map=new google.maps.Map(document.getElementById('googleMap'),mapProp);};")
        }
        else {
          msg ("The map failed to load!")
        }
        ShowRoomDescription
      ]]></changedparent>
    </object>
    <exit alias="north" to="another room">
      <inherit name="northdirection" />
    </exit>
  </object>
  <object name="another room">
    <inherit name="editor_room" />
    <latitude>51.508782</latitude>
    <longitude>-0.120850</longitude>
    <usedefaultprefix type="boolean">false</usedefaultprefix>
    <exit alias="south" to="room">
      <inherit name="southdirection" />
    </exit>
  </object>
</asl>

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums