Support » Fixing WordPress » Embeding the new Apple Maps Mapkit Js

  • Hello all,

    im trying to add the new apple maps to a wp installation.
    There are some videos from apple how to install mapkit on a server or static page.
    But strange enough i cant seem to find any hint about Wp.

    Did somebody here already embed the apple map in wp?

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi Zetona

    I’ve written a guide and created a sample plugin to show a Mapkit JS embed. See https://mattrad.uk/embedding-apple-map-wordpress/

    Cheers,
    Matt

    Thank you Matt!
    I will try your plugin, this helps me heaps.

    Matt, i got the map to work thanks to your plugin.
    We would need 2 additional elements:
    A marker, ideally with a custom graphic
    A “get directions” button

    Is that already possible or do i have to wait for the update of your plugin?

    Thank you

    Glad you got it to work 🙂

    The plugin is only a proof-of-concept right now, but I’m considering working on this plugin a little more and releasing it to the WordPress plugin repository.

    In the meantime, if you’re comfortable with JavaScript, then you could follow the Custom Callout example code shown on Apple’s example maps page: https://developer.apple.com/maps/mapkitjs/. That would give you enough to go on to add an annotation (what Apple is calling a marker) plus a callout. You’d need to put any revised JS in inc/map.js.

    Thank you Matt!

    Im hoping to see your plugin in the Wp repo anytime 🙂
    I dont see the marker on the map yet, can you please have a look at my code?
    This is what i have in /inc/maps.js
    I just removed the script tag and pasted apples code into yours.
    I would like to have only one annotation, but when i removed one (Work) the map didnt display anmore.

    document.addEventListener("DOMContentLoaded", function(event) { 
    
        mapkit_vars;
        
        mapkit.init({  
            authorizationCallback: function(done) {
                done(mapkit_vars.mapkit_jwt_token);
            }
        });
    
        var lat = 44.808655;
        var lon = 20.432128;
    
        var WordCamp = new mapkit.CoordinateRegion(
            new mapkit.Coordinate(lat , lon),
            new mapkit.CoordinateSpan(0.005, 0.005)
        );
        
        var map = new mapkit.Map("map");
        map.region = WordCamp;
    
        
        var MarkerAnnotation = mapkit.MarkerAnnotation,
            clickAnnotation;
        var home = new mapkit.Coordinate(37.722319, -122.434979),
            work = new mapkit.Coordinate(37.3349, -122.0090201);
        
        mapkit.init({
            authorizationCallback: function(done) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/services/jwt");
                xhr.addEventListener("load", function() {
                    done(this.responseText);
                });
                xhr.send();
            }
        });
        var map = new mapkit.Map("map");
        
        // Setting properties on creation:
        var homeAnnotation = new MarkerAnnotation(home, { color: "#4eabe9", title: "Home", glyphText: "🏠" });
        
        // Setting properties after creation:
        var workAnnotation = new MarkerAnnotation(work);
        workAnnotation.color = "#969696"; 
        workAnnotation.title = "Work";
        workAnnotation.subtitle = "Apple Park";
        workAnnotation.selected = "true";
        workAnnotation.glyphText = "";
        
        // Add and show both annotations on the map
        map.showItems([homeAnnotation, workAnnotation]);
        
        // Drop an annotation where a Shift-click is detected:
        map.element.addEventListener("click", function(event) {
            if(!event.shiftKey) {
                return;
            }
        
            if(clickAnnotation) {
                map.removeAnnotation(clickAnnotation);
            }
        
            var coordinate = map.convertPointOnPageToCoordinate(new DOMPoint(event.pageX, event.pageY));
            clickAnnotation = new MarkerAnnotation(coordinate, {
                title: "Click!",
                color: "#c969e0"
            });
            map.addAnnotation(clickAnnotation);
        });
        
    
    });

    Ah, that’s not going to work I’m afraid. Can you send me the URL of the page you have the map on?

    I can see from your code and your website that you’ve effectively put two maps on the page. Let’s fix that 🙂

    Replace everything in inc/map.js with the following code:

    document.addEventListener("DOMContentLoaded", function(event) { 
    
        mapkit_vars;
        
        var lat = 52.527231;
        var lon = 13.397367;
    
        var MarkerAnnotation = mapkit.MarkerAnnotation,
        clickAnnotation;
    
        var home = new mapkit.Coordinate(lat, lon);
    
        mapkit.init({  
            authorizationCallback: function(done) {
                done(mapkit_vars.mapkit_jwt_token);
            }
        });
        var map = new mapkit.Map("map");
    
        // Setting properties on creation:
        var homeAnnotation = new MarkerAnnotation(home, { color: "#666666", glyphText: "DSWV" });
    
        // Add and show both annotations on the map
        map.showItems([homeAnnotation]);
    
        // Drop an annotation where a Shift-click is detected:
        map.element.addEventListener("click", function(event) {
            if(!event.shiftKey) {
                return;
            }
    
            if(clickAnnotation) {
                map.removeAnnotation(clickAnnotation);
            }
    
        });
    });

    This will create a map with a single annotation, with the text DSWV in it.

    I haven’t had time to look at directions yet I’m afraid.

    Thank you Matt.
    i have exchanged this but the annotation still doesnt show.
    Can you please have a look now and see what could be the problem?

    https://dswv.de/wp-content/plugins/apple-map-embed-master/inc/map.js still looks as before to me. Do you have caching enabled?

    yes, i had to empty it several times just now before it showed the annotaton!
    Thank you, now its working 🙂

    Hey, that’s great! I can see it’s working. I have one more thing for you. Change:

    mapkit.init({  
      authorizationCallback: function(done) {
        done(mapkit_vars.mapkit_jwt_token);
      }
    });

    for this:

    mapkit.init({  
      authorizationCallback: function(done) {
        done(mapkit_vars.mapkit_jwt_token);
      },
      language: "de"
    });

    That will change all the map labels into German 🙂 Gern!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Embeding the new Apple Maps Mapkit Js’ is closed to new replies.