Google Map Full Tutorial - Open a Popup By Clicking On Google Map

Today I will tell you how to, you can use Google Map on your website. It's not only Google Map tutorial, also I'll show you how to you can show exact location by using latitude and longitude and much more with the source files, read all the details.

Our map will show like as-

At first go here https://www.google.com/maps. By using the Google map search form, you can find your exact location or you can add your own location by another way. Suppose I've written San Diego in search form. After coming the search result, right click and click 'What is here'.

You'll see a pop-up, where showing latitude and longitude numbers. Copy and save the number. Now download the HTML/Javascript files from here. Actuallay here have our all source code.

The main thing is-

1. Open index.html and add the style and jQuery file.
2. Paste the code where you want to show the map.

<div id="map_wrapper">
  <div id="map_canvas" class="mapping"></div>
</div>

3. Then open js folder and open gmap.js-

jQuery(function($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
    var map;
    // Set the latitude & longitude for our location (London Eye)
    var myLatlng = new google.maps.LatLng(32.722628, -117.174859);
    var mapOptions = {
        center: myLatlng, // Set our point as the centre location
        zoom: 14, // Set the zoom level
        mapTypeId: 'roadmap' // set the default map type
    };
         
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    // Allow our satellite view have a tilted display (This only works for certain locations)
    map.setTilt(45);
    // Create our info window content
    var infoWindowContent = '<div class="info_content">' +
        '<h3>Themepack LLC</h3>' +
        '<p>Dhaka, Bangladesh</p>' +
        '<p>Web: <a href="http://themepack.net" target="_blank">http://themepack.net</a></p>' +
        '<p>Blog: <a href="http://ithousebd.blogspot.com/" target="_blank">http://ithousebd.blogspot.com</a></p>' +
        '<p>+88 01738 631 658</p>' +
    '</div>';
    // Initialise the inforWindow
    var infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent
    });
             
    // Add a marker to the map based on our coordinates
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Themepack LLC., Dhaka',
        "icon": 'images/gmaplogo.png'
    });
    // Display our info window when the marker is clicked
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map, marker);
    });
 }

Here line number 11 has latitude and longitude numbers, which indicate your place. For using custom icon see line number 42, where I've called an image. See line number 25, where I've shown, what you want to show after clicking the custom icon.

See the JS file carefully, you'll understand all things.

If you think you no need to custom icon, you can just copy paste the embed link. It's so easy way. After searching the place name, click on it.

Click 'Share' button, a pop-up will open, click 'Embed map' tab and copy the code.

Then paste the code in your website where you want.

Thanks.

- Mofizul