Introduction

Here is to shows you how can you add google map to your web page by JavaScript (not using iframe). Besides, you will also learn about searching, and marker dragging.

1. Obtaining an Google Map API key

Just visit this page, it will shows the steps on how to obtain an API key.

2. Add a canvas to your web page (html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#map {
    width: 100%;
    height: 400px;
}
</style>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}"></script>

<script>
// Map setup
var latlng = new google.maps.LatLng(3.12345, 101.12345);
var mapOptions = {
    zoom: 8, // set the map zoom level
    center: latlng, // set the center region
    disableDefaultUI: true,
    zoomControl: true, // whether to show the zoom control beside
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
</script>

Just add the code above to your page, and refresh your browser…tadaaa~ Google Map is appear on your page now.

2. Add a marker (or pin) to your location

1
2
3
4
5
6
7
8
9
10
// ...
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// ADD THIS
var marker = new google.maps.Marker({
    map: map, // refer to the map you've just initialise
    position: latlng, // set the marker position (is based on latitude & longitude)
    draggable: true // allow user to drag the marker
});

Now, add the block of code after var map = .... Then refresh your browser again, then you will see

Google map with marker

You can even customize your marker

1
2
3
4
5
6
var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    draggable: true,
    icon: 'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png' // ADD THIS
});

Just add one more line, you will see a different marker. Replace the icon URL to any URL that you want to show.

3. Add a search function

Add a search input above the map (or anywhere your prefer)

1
2
3
4
5
6
7

<!-- ADD THIS -->
<input type="text" id="address" placeholder="Address" style="width: 100%;"/>

<div id="map"></div>
...

Then add an event handler, so that when user hit <ENTER> key, it search

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// ...
var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    draggable: true
});

// ADD LINES BELOW
// add an event handler
document.getElementById('address').onkeyup = function(e) {
    if(e.keyCode == 13) { // keyCode 13 represent <ENTER> key
        geocoding(this.value); // get the value from address text box and pass to the search function
        return false;
    }
}

var geocoder = new google.maps.Geocoder();
function geocoding(keyword) {
    geocoder.geocode({address: keyword}, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) { // if got results
            // always take the first result only
            map.setCenter(results[0].geometry.location); // set the map region to center
            marker.setPosition(results[0].geometry.location); // change the marker position
        } else {
            // if no result, just alert user
            alert('Location not found.');
        }
    });
}

4. What if you want to keep the latitude & longitude?

Add 2 more inputs after search box (or anywhere you prefer). In this case use a text box, just for you to see, usually end user don’t want to see this kind of data, is better to keep it hidden. (e.g. <input type="hidden" id="lat" value="3.1234" />)

1
2
3
4
5
6
7

<input type="text" id="address" placeholder="Address" style="width: 100%;"/>

<!-- ADD THIS -->
Lat: <input type="text" id="lat" value="3.1234"/>
Lng: <input type="text" id="lng" value="101.1234"/>

Now, you want to set the latitude & longitude when:

  • user drag the marker
  • user search by address

User drag the marker

Add an event handler to the marker.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function geocoding(keyword) {
    // ...
}

// ADD THIS
google.maps.event.addListener(marker, 'dragend', function() {
    // it will run this only if user DROP the marker down (drag end)
    var position = marker.getPosition();
    // set the position value to text boxes
    document.getElementById('lat').value = position.lat();
    document.getElementById('lng').value = position.lng();
});

User search by address

Just now we already add an event handler to search remember? Now just add some code to geocoding function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function geocoding(keyword) {
    geocoder.geocode({address: keyword}, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);

            // ADD THIS
            document.getElementById('lat').value = results[0].geometry.location.lat();
            document.getElementById('lng').value = results[0].geometry.location.lng();
        } else {
            alert('Location not found.');
        }
    });
}

5. You are done. See the result (for illustration purpose only)

Lat:
Lng:

References: