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.)
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>