23 MAY

Google Maps API v3 Embedded with Custom Location Pin

Google Maps API offers a wide variety of applications that enable you to embed the functionality and customisation of Google Maps into an external website at no cost.

This tutorial aims to guide you through the process of embedding a basic map, located at a specific point with a custom pin, which can be particularly useful for ‘contact’ pages.

Google API v3 Map

Step 1 – Setup jQuery and Google MAP API

The embedded map requires Javascript, to speed development up we will be using the latest version of jQuery. These scripts must be located between the <head></head> tags in your webpage HTML.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

If you are interested as to why the script is missing the http:, this allows a single reference to be used on both HTTP and HTTPS pages. The script will be hosted by Google instead of locally, this decreases latency and speeds up webpage loading times. When testing locally the http: must be added. Next the Google Maps API script needs to be included:

<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

Step 2 – The HTML

This step is very simple.  An empty div needs to be created in your HTML page. The div must have an ID so that it can be referenced in Step 3.

<div id="map_div"></div>

Step 3 – Creating the maps.js script

This step explains the code needed to interact with the Google API script from step 1 and create a map on your webpage.
Firstly a separate Javascript file will need to be created. The jQuery code will be placed in this file to keep things tidy and not to clutter the webpage.

To define where the pins are to be placed a set of longitude and latitude values are required. The easiest way to find these values is to visit the Google Maps website ( http://maps.google.co.uk/) and right click on the exact position on the map the pin is to be placed. The ‘What’s Here?’ option will provide you with the latitude and longitude values.

maps.js

$(document).ready(function() {

	//------- Google Maps ---------//

	// Creating a LatLng object containing the coordinate for the center of the map
	var latlng = new google.maps.LatLng(53.385846,-1.471385);

	// Creating an object literal containing the properties we want to pass to the map
	var options = {
		zoom: 15, // This number can be set to define the initial zoom level of the map
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
	};
	// Calling the constructor, thereby initializing the map
	var map = new google.maps.Map(document.getElementById('map_div'), options);

	// Define Marker properties
	var image = new google.maps.MarkerImage('images/marker.png',
		// This marker is 129 pixels wide by 42 pixels tall.
		new google.maps.Size(129, 42),
		// The origin for this image is 0,0.
		new google.maps.Point(0,0),
		// The anchor for this image is the base of the flagpole at 18,42.
		new google.maps.Point(18, 42)
	);

	// Add Marker
	var marker1 = new google.maps.Marker({
		position: new google.maps.LatLng(53.385846,-1.471385),
		map: map,
		icon: image // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
	});

	// Add listener for a click on the pin
	google.maps.event.addListener(marker1, 'click', function() {
		infowindow1.open(map, marker1);
	});

	// Add information window
	var infowindow1 = new google.maps.InfoWindow({
		content:  createInfo('Evoluted New Media', 'Ground Floor,
35 Lambert Street,
Sheffield,
South Yorkshire,
S3 7BH
<a title="Click to view our website" href="http://www.evoluted.net">Our Website</a>')
	});

	// Create information window
	function createInfo(title, content) {
		return '
<div class="infowindow"><strong>'+ title +'</strong>
'+content+'</div>
';
	}

});

Once this Javascript file has been created it should be added to the header scripts along with the others in Step 1.

Step 4 – Custom Pins

Google Maps API allows you to further customise the embedded map by using your own custom designed images.

Here is a list of some free custom designed pins for maps:
http://mapicons.nicolasmollet.com
http://www.premiumpixels.com/freebies/map-location-pins-psd/
http://www.premiumpixels.com/freebies/map-pins-tooltips-psd/

For a more detailed overview of the Google Maps v3 API please visit the official Google documentation.
http://code.google.com/apis/maps/documentation/javascript/reference.html

View post demoDownload post source

Tags: , ,

Written by Dan Lawson

Dan is a Web Developer and (self proclaimed) Fifa skills maestro at Evoluted. He spends most of his time developing attractive and engaging websites whilst avoiding the peer pressure of drinking tea or coffee. He enjoys watching Manchester United in his spare time and is the 6 time office Fifa champion. Read more posts by Dan Lawson

Free social media icons for every subscriber

Sign up to our mailing list to have new updates delivered straight to your inbox. Every subscriber will get a free pack of social media icons!


35 Comments

  1. Thomas Burgeson

    July 06, 2011 at 12:41 am

    Great tutorial, thank you! The organization and comments in your code are very helpful. I am new to the Google Maps API v3 and am trying to get multiple custom location pins (several different styles) to display for the different types of categories on my map. Is the code in this tutorial compatible with such a use, and if so, how might I go about it? (I noticed you called your 1st marker ‘marker1′, which could imply that adding more markers is possible.) Thanks in advance for any insights you might be able to offer!

    • team

      Dan Lawson

      July 08, 2011 at 5:13 pm

      Hi Thomas,

      Yes that is possible, you would simply need to duplicate each section of the process and change the number. I’ve attached an example here: http://jsbin.com/igutis/3/edit

      Dan

      • Erin O’Neill

        January 25, 2012 at 11:37 pm

        Thank you Dan for this tutorial.

        Question regarding the code for multiple markers with unique images. When I replaced the map.js with the code provided at http://jsbin.com/igutis/3/edit, the map no longer loads.

        I’m not sure what I’m missing, any/all help would be greatly appreciated!!

        • team

          Dan Lawson

          January 26, 2012 at 10:11 am

          Hi Erin,

          Are you including the required Javscript files in the header? I tried at the link below and it works fine.

          http://jsfiddle.net/ymLvv/

          • Erin O’Neill

            January 26, 2012 at 6:50 pm

            Thank you Dan!

            The discrepancy I missed was the true/false sensor indicator and the JS library (1.7.1 rather than 1.6.1). Thank you!

            Erin

  2. Nicolas Mollet

    July 08, 2011 at 4:49 pm

    May I ask you to update a link in this article ?

    My “Google map icons” website moved http://code.google.com/p/google-maps-icons/ from to http://mapicons.nicolasmollet.com

    I would be pleased if you could change it :)

    Thanks a lot !

    • team

      Dan Lawson

      July 08, 2011 at 5:04 pm

      Hi Nicolas, Thanks for the update, the link has been changed.

      Thanks again for these markers.

  3. mona

    July 18, 2011 at 7:12 am

    hi i followed ur tutorial but still am not able to get the marker,
    With the following code, am able 2 view the map but when am inserting add marker code am not able 2 view even the map as well, can u plz help me out.

    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }

    function initialize() {
    var latlng = new google.maps.LatLng(17.43, 78.43);
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(17.43, 78.43),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById(“map_canvas”),
    myOptions);

    }

     

    as i need to add a quite no. of markers with info window as well.
    thankz in advance…..
    waiting for your reply ASAP

  4. Desislava

    August 10, 2011 at 3:59 pm

    Exactly what I needed! Thanks a lot!

  5. Julien

    September 14, 2011 at 2:53 pm

    Thank you for this great tutorial! It’s perfect.

  6. Ryan

    September 14, 2011 at 3:55 pm

    I have a question about multiple locations on one map. I did figure out how to add multiple locations, but when you click on the icon to get more information the boxes over lap if you click on more than one. Is there a way to close the information window if another one is opened so there is no overlapping? Thanks.

    • team

      Dan Lawson

      September 14, 2011 at 4:41 pm

      Hi Ryan,

      Although I have not done this I believe it is possible. From what I can see there are 2 options:

      Option 1 – Is to reuse the same Info Window for each marker
      Option 2 – Would be to call the InfoWindow.close() method. Before opening an Info Window.

      Hope that helps

  7. Jeremiah white

    September 15, 2011 at 1:44 am

    Great tutorial. I’m pretty sure I can beat you in FIFA. If you play FIFA 2007- 2009 you can play with me. AGF Aarhus in the Danish superliga. I also think I am on the bench for the us national team in FIFA 2008 or 9. But thanks for the help!

    J.White

    • team

      Dan Lawson

      January 26, 2012 at 10:16 am

      Thanks for the reply Jeremiah.

      I play FIFA 12 & I doubt it ;)

  8. sathish

    September 28, 2011 at 12:33 pm

    Hi ,
    Very nice tutorial..
    I am struggling at one issue. Please help me.

    You are passing ‘latitude & longitude’ in ‘position:’ . But, i need to do it by address. How can i pass it.
    Or, how can i get latlong using this method.

    • team

      Dan Lawson

      September 28, 2011 at 12:40 pm

      Hi,

      You would need to look into Google Geocode if you want to convert an address string into coordinates.

      Hope that helps

  9. sathish

    September 28, 2011 at 12:49 pm

    Thanks for ur quick reply lawson,

    Is it possible to implement “http://maps.googleapis.com/maps/api/geocode/json?address=” and get json request in jquery.

    Thank you.

  10. Rik

    November 08, 2011 at 11:47 pm

    Is it possible make the map open to fill the entire screen ??

    E.g. http://code.google.com/intl/es-AR/apis/maps/documentation/javascript/examples/marker-simple.html

    • team

      Ash Young

      November 11, 2011 at 11:09 am

      Yes Rik this is possible, you’d need to set the #map_div to have a width and height of 100%.

  11. Chris

    November 28, 2011 at 11:51 pm

    Hi there,

    I’m fairly confident that I’ve followed the tutorial correctly, but I can’t seem to get the map to appear. Do I need to also embed the map in the “map_div” div, or is the JavaScript code supposed to do that for me?

    Cheers,

    Chris

    • team

      Dan Lawson

      November 29, 2011 at 10:07 am

      Hi Chris,

      The JavaScript code should populate the empty map_div for you. Are you sure that you are including the required JavaScript files in your header?

      Do you have a link to your project available? You can post the link here or e-mail me.

      Thanks

    • Graham

      May 14, 2012 at 6:48 pm

      Great tutorial, thanks! Exactly what I needed.

      Might be worth mentioning that this requires CSS width/height for the #map_div element so that the map shows up. That was an oversight that screwed me up for quite a while before I viewed the source on your demo. Stupid I know, but I thought I’d put this comment here in case anyone else is as stupid as me.

  12. Mike Newell

    January 24, 2012 at 10:25 pm

    can you then detect where the user has dropped the pin and get lat/long?

  13. Richard Bland

    February 01, 2012 at 5:56 pm

    Just copied the js and pasted it in and I am getting a syntax error on line 41 which is where you list your office address.

    Is this normal or do I need to make some changes?

    • Richard Bland

      February 01, 2012 at 5:58 pm

      Not to worry, it was just in the need of some tidying up. :-)

  14. gabi hrvatin

    February 08, 2012 at 9:19 pm

    Hello, this is a super great tutorial!! Thanks a lot!
    I have one question, I putted your demo in my test site, works fine, but the cursor on the left side is not showing properly, can you take a look: http://tri.site90.net

    What am I missing?
    Thanks in advance

    • team

      Dan Lawson

      February 09, 2012 at 10:01 am

      Hi,

      Could you link me to the exact page please, there’s no map on your site.

      • gabi hrvatin

        February 09, 2012 at 11:31 am

        Hello!

        sorry, here is the link: http://tri.site90.net/kontakt.html

        • team

          Dan Lawson

          February 09, 2012 at 11:40 am

          Hi,

          I can’t see a problem with your map. The cursor looks fine on all browsers I tried.

          http://bit.ly/yceTJN

          • gabi hrvatin

            February 09, 2012 at 12:06 pm

            Sorry, I asked you because in my map there is no rounded cursor above the little orange man and is no vertical line between the “zoom in” and “zoom out”.

  15. gabi hrvatin

    February 09, 2012 at 1:04 pm

    Here I am again :-)

    I uploaded the map once again and now it is all right, just like your demo!
    Sorry for the trouble and thanks for yor time and great tutorial!

    Gabi

  16. Gustavo Macedo

    March 04, 2012 at 6:50 pm

    My pin moves when zoom in or zoom out.
    Why?

  17. Andreas

    March 27, 2012 at 12:13 pm

    Is it possible to make the marker a link img ?
    To get DOM id call to slide or doing what ever.
    Like here i try to call the link to change the optgroup.
    http://jsfiddle.net/vjandrei/69Z4t/12/

  18. Dan

    May 03, 2012 at 8:37 pm

    Awesome! Thanks for this.