How to add a Custom Google Map with Geo-Location using JavaScript and the Google Maps API.
Wouldn’t it be cool to have a Google Map on your website for your business? One that is customized exactly the way you like? With a little JavaScript and an API key, we can do exactly that.
You will need basic HTML, CSS, and JavaScript skills for this.
What’s an API key? An API is an Application Programming Interface. That is fancy for a bit of code that makes someone else’s app/software/website feature play nicely with your site/software/whatever. An API has been perfectly described as “an official way to use someone else’s JavaScript”. An API key is like a secret handshake that let’s their software know that you are really you, so that you get YOUR correct bits and not someone else’s. (So don’t share your API key).
Let’s get started.
Before You Start
Before you do anything else, make sure you have a place to document your information and put it somewhere safe! I use an excel spreadsheet to save all of my information in one place, but you use what works for you. I also save any code samples or snippets to a text file.
Next, verify your domain! Don’t do like I did and forget that unless you have already verified your domain, your restricted API key will not work. You will waste hours debugging. Trust me on this one.
Setting up your Google Maps Project and API Key
If you do not have one already, you will need a Google Account.
You will also need to sign up for a Google Cloud account. They have a free account, which will be fine unless you have a lot of traffic to your site and map.
Go to the Google Maps platform. https://cloud.google.com/maps-platform/. This is where you will get the key and add the information to personalize and customize your map.
In this example, I’m adding a map to my own website.
If you have not done so already, create a project (click on the blue button in the top right corner) and give your project a descriptive name.
Next select that project. You will see a page with a few options for project types. This is where you will get your Maps API key. Each type of project has its own API key and service.
Select the Maps JavaScript API. This includes imagery and local data from Google Maps. Click “Enable”.
You will get a new screen showing the current lack of stats. Select the “Credentials” Tab. This is where you will create the credentials that allow you to access your API Key. You can select on your own or answer the questions to select the kind of credentials you need.
Copy your API key and put it somewhere safe, you will need it shortly. It will also always be available on the Google Cloud Platform.
You will have the opportunity to restrict your key. This controls which websites, IP addresses, or applications can use your key. It is a good idea to do this, as it prevents anyone from stealing your key and usage quota. Follow the instructions on the page to set the appropriate restrictions. I would suggest setting the restrictions AFTER you have tested the map to verify that the map actually works and displays the way you like it.
Make sure the following APIs are enabled:
- Maps JavaScript API
- Google Maps Embed API (located under “Google Maps APIs”)
- Geocoding API
Now you are ready to use the Google Maps JavaScript API.
The JavaScript and HTML for the Map
Google includes a section with extensive tutorials and documentation. In this section you will find a page including sample code for the map.
They provide sample placeholder styling. In this example, the div wrapper for the map is set at 400px high and 100% wide, so it would be the full width of the web page. Set yours to whatever height and width fit for your design. Note that if you don’t set your height and width for the map, it may not display properly.
Sample CSS for the map:
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
The HTML div wrapper:
<div id="map"></div>
This JavaScript adds the map to the page. Google shows this added right before the closing body tag. In this example, you will replace “YOUR_API_KEY” with the API key you generated earlier.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
This is the sample function to add your location and marker to the map, with placeholder content. This function also centers the map on your location and sets the zoom level. Low zoom numbers zoom out, high numbers zoom in.
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru, Austuralia
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
You will need to update this function with your Latitude and Longitude. I found the developer resource from Mapquest to be easy to use.
For this map, I’ll use the Rock & Roll Hall of Fame in Cleveland, Ohio. Address: 1100 E 9th St, Cleveland, OH 44114. Latitude: 41.506504, Longitude: -81.692365.
For my map I also updated the variable name to rockHallAddress, as the sample variable Uluru references a location in Australia.
Here you see the function updated with the new latitude and longitude, as well as my new variable name:
<script>
// Initialize and add the map
function initMap() {
// The location of my address in latitude and longitude
var rockHallAddress = {lat: 41.506504, lng: -81.692365};
// The map, centered at the Rock and Roll Hall of Fame
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 11, center: rockHallAddress});
// The marker, positioned at the rock hall address
var marker = new google.maps.Marker({position: rockHallAddress, map: map});
}
</script>
Next you will add all of the above code to your website. The tutorial places the JavaScript at the bottom of the page.
Here is an example of the complete code as I set it up for this site. Note: for security I am showing a fake placeholder API key.
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 300px;
width: 100%;
}
</style>
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of the rock hall address in latitude and longitude
var rockHallAddress = {lat: 41.506504, lng: -81.692365};
// The map, centered at The Rock and Roll Hall of Fame
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: rockHallAddress});
// The marker, positioned at my address
var marker = new google.maps.Marker({position: rockHallAddress, map: map});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=SAMPLE_API_KEY_ABCDEFGHIJKL_1234567890_XJZ&callback=initMap">
</script>
Custom Google Map!
I can further customize this map by adding detail to the markers, changing to a different type of map (terrain, satellite, or road), and add styling to update the appearance and hide content that I do not want to display.
Resources
The Google Maps Platform: https://cloud.google.com/maps-platform/
Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
Restrict your API Key: https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key
Google Cloud Platform: https://cloud.google.com/free/docs/gcp-free-tier#always-free
Latitude and Longitude finder: https://developer.mapquest.com/documentation/tools/latitude-longitude-finder/
Google Maps API Key Best Practices: https://developers.google.com/maps/api-key-best-practices
Styling a Map: https://developers.google.com/maps/documentation/javascript/styling
Google Webmaster Central: https://www.google.com/webmasters/verification/home?hl=en