Tag Archives: maps

How to use the Google Maps API on Windows 8

Something that hasn’t been very well documented yet is how to implement the Google Maps API with Windows 8. There are lots of questions about how to do it, but not a lot of answers. Hopefully, this tutorial can help with that.

Before getting into the uber-exciting details, I need to thank Frank LaVigne (@tableteer) for his help. This tutorial would have never been possible without his genius. You can find Frank online at Frank’s World. I’m not a JavaScript expert and Frank was super patient while I asked him tons of questions.

NOTE: If you’re looking for a stupid-easy maps implementation, check out this blog post from G. Andrew Duthie about using Maps app that ships with Windows 8.

Out-of-the-box error

Right now, if you try to include the script for Google Maps API and add a map to the page, you’ll be met with the following error:

clip_image002

Even though you’ve included the source for the script, calling google.maps just doesn’t work. I’ve discovered there are a couple gotchas when implementing the Google Maps API. Keep reading to find out about the secret sauce for Google Maps on Windows 8.

Secret Sauce

Using an iFrame

The first ingredient for the secret sauce is to use an iFrame to display the Google Map. In the tutorial we’ll create a second html page that will have all the information for the Google Map implementation. We’ll create the iFrame in default.html in the tutorial.

Not using page control

The next ingredient in the secret sauce (that technically doesn’t go in) is the page control. For the map html page, we’ll need a map.html, map.js and map.css file. You can get all of these files bundled together by adding a page control. Do NOT do this. The page control also implements some navigation functionality that Google Maps doesn’t know what to do with. This can cause some errors having to do with width offsets that Google Maps doesn’t understand how to implement.

Ms-appx-web

The last, and possibly most important, ingredient for our secret sauce is the use of ms-appx-web in our iFrame src. Due to security restrictions of Windows 8, you can’t load external scripts out-of-the box with the Windows 8 app templates. By using ms-appx-web with our iFrame, we’re able to load locally-packaged content that runs in a web context. For more information, check out How to Reference Content on MSDN.

Tutorial

In this tutorial, we’re going to use the Google Maps API to display earthquake data from the U.S. Geological Survey. The code I’m using to access Google Maps and USGS can be found on the Google Developers Academy site, here. You can download the project here. Please see the end of the post for licensing information.

Set up

Before beginning, you’ll want to make sure your machine is all set up. To develop for Windows 8, you must be running Windows 8. You can download a 90-day evaluation copy here. In addition, you will need Visual Studio 2012 Express for Windows 8 (or higher). The Express version is a free download. You can find it here.

Start developing your Windows 8 app today. Generation App has tons of great resources for developers. Sign up today for tips, great documentation, videos and more!

Create a blank project

The first step for this tutorial is to create a New Project in Visual Studio 2012. This will be a JavaScript project based on the Blank App template. Name your project “MapTutorial.”

clip_image004

Add a map.html/css/js

Now we’ll add the html, css and js file for our map frame that will be referenced from the default.hml page.

Right-click on your project (MapTutorial) in the Solution Explorer and go to Add –> New Item.

clip_image006

Add an HTML Page and call it map.html.

clip_image008

Follow the same process to add map.js and map.css so that your Solution Explorer looks like this:

clip_image010

Add scripts

Now we want to add references to our css and js files in map.html. Open up map.html and the following in the <head> tag:

<!-- map references -->
<link href="/map.css" rel="stylesheet" />
<script src="/map.js"></script>

Now we want to add the Google Maps API script. Before the <!– map references –>add the following:

<!-- Google Maps API reference -->
<script
  src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>

So far, so good. There is one more script we’re going to add and that’s the earthquake data we’ll be pulling from the U.S. Geological Survey. After the <!– map references –>add the following:

<!-- USGS URL data source -->
<script src = "http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week">
</script>

Your <head> tag should look like this:

<head>
    <title></title>

    <!-- Google Maps API reference -->
    <script       src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
    </script>

    <!-- mapframe references -->
    <link href="/map.css" rel="stylesheet" />
    <script src="/map.js"></script>

    <!-- USGS URL data source -->
    <script src="http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week"></script>

</head>

The last thing we’re going to do with map.html is add a div tag for where we want to display the map. Add the following div tag so the <body> looks like this:

<body>
        <div id="mapdisplay"></div>
</body>

At this point if you run your project, you should see a black page and “Content goes here” in the upper left corner.

Add logic

Now that we’ve got our project all set up, let’s add some logic to do something with the earthquake data we’re getting from USGS. I’ve made some changes to the Google Developer code to put things in the right order to work with Windows 8.

In eqfeed_callback , I’ve taken out the logic and put that into addMarkers () which is called from initialize() . In eqfeed_callback (which we need based on the USGS script), I’m saving the results into a global variable to access later. In addition, I’ve commented out setting the icon property for each point. You can uncomment it to see a different way to view the data.

Copy and paste (or write out) the following code in map.js:

var map;
var dataResults;

function initialize() {
    map = new google.maps.Map(document.getElementById('mapdisplay'), {
        zoom: 3,
        center: new google.maps.LatLng(40, -187.3),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    addMarkers();
}

eqfeed_callback = function (results) {
    dataResults = results;
    }

function addMarkers () {
    for (var i = 0; i < dataResults.features.length; i++) {
        var quake = dataResults.features[i];
        var coors = quake.geometry.coordinates;
        var latLong = new google.maps.LatLng(coors[1], coors[0]);
        var marker = new google.maps.Marker({
            position: latLong,
            map: map
            //icon: getCircle(earthquake.properties.mag)
        });
    }
}

function getCircle(magnitude) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: .2,
        scale: Math.pow(2, magnitude) / Math.PI,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

google.maps.event.addDomListener(window, 'load', initialize);

In addition, copy and paste the following code into map.css:

html, body, #mapdisplay {
    margin: 0;
    padding: 0;
    height: 100%;
}

At this point, if you run the project again it should still be a black screen with “Content goes here” in the upper left corner. Don’t worry, we’re going to put content in our app in the next step!

Add an iFrame

Open default.html, if it isn’t already open. In the <body> we’re going to add an iFrame that uses map.html as the source (and a header title). Add the following code so the <body> looks like this:

<body>
    <h1>Google Maps API on Windows 8</h1>
    <iframe id="Map" src="ms-appx-web:///map.html" style="width:100%;height:100%;"></iframe>
</body>

Run

Now the only thing left for us to do is run the app! You can use F5 or click the green triangle (that looks like a play button) on the Visual Studio tool bar:

clip_image012

At this point you should be seeing your app with a slippy Google Map on it and map markers for where earthquakes have occurred. Yay! You now have the Google Maps API working on Windows 8!! You can download the full project from my SkyDrive.

clip_image014

Portions of this page are reproductions and modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License and Apache 2.0 License. You can find the original pages at Google Developers Academy –> Maps (—> JavaScript) –> Importing Data & Visualizing Data.