Blog: Web Design
Map marker on a physical map

Add A Map Marker To Google Maps Embedded iFrame

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Embedding Google Maps into a page is fairly easy, but there are little things you can do to improve the appearance and usability. There are also several things you can do if you dig into the API, but the fixes this article covers are fairly painless to carry out. The default Google Maps iframe embed does not come with a map marker. Here are some very simple hacks to fix that.

The normal iframe looks something like this: (spaces added so you can see what’s going on).


<iframe width="425" 
        height="350" 
        frameborder="0" 
        scrolling="no" 
        marginheight="0" 
        marginwidth="0" 
        src="https://maps.google.com/maps?f=q&
        source=s_q&
        hl=en&
        geocode=&
        q=333+E+34th+St,+New+York,+NY&
        aq=1&
        oq=333&
        sll=37.269174,-119.306607&
        sspn=16.742323,33.815918&
        ie=UTF8&
        hq=&
        hnear=333+E+34th+St,+New+York,+10016&
        t=m&
        z=14&
        ll=40.744403,-73.974467&
        output=embed">
</iframe>

The q part of this string is the query of the location that Google Maps has to find. If we change that to daddr (for destination address), a green marker labeled “B” will appear on the embed. If the user clicks through, they will go to a Google Maps screen where the destination address is already filled in.

The second simple thing we can do to make it easier for users to find a location is add a form for them get directions via Google Maps.


<code<div class="directions"><form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr" class="dir-label">Enter Your Location for Directions</label>
   <input type="text" name="saddr" class="dir-input" size="16" />
   <input type="hidden" name="daddr" value="A List Apart, 333 E 34th St, New York, NY" />
   <input type="submit" value="Get directions" class="dir-button button" />
</form></div>

This produces a single field form that gives the user directions to the destination business location. Users will know the map and the form are connected because they are close to one another. You will have to add custom CSS to style the form and button to match the specific website. These are simple things we can do, without digging into the Google Maps API to improve user experience.

Get Directions Google Maps


If you need more granular control over the display of your Google Maps, read my post on Adding Custom Styles To Google Maps.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

12 comments on “Add A Map Marker To Google Maps Embedded iFrame

  1. I’ve an embedded map, points to a kml file, and I’d like to replace the custom markers.

    Is there an easy hack of the iframe, without needing to revert to the API, to display custom markers?

  2. HI,

    Is it possible to add multiple markers with Newer google maps with explore and zoom options on the right side bottom of map. Right now i am able to build a map with multiple markers using the api. But the api code uses the old google map.

  3. Hi Yogaraj. NOt 100% sure what you are asking here. I’m guessing that most of the time, the explore and zoom options are going to show up in the upper left hand corner if they are enabled. Since Google Maps is an iframe, targeting those elements and moving them is pretty damn difficult.

    Are you talking about this? https://developers.google.com/maps/documentation/embed/guide
    As for the API, you should be using Google Maps API V3. There’s a getting started guide here: https://developers.google.com/maps/documentation/javascript/tutorial
    and documentation here: https://developers.google.com/maps/documentation/javascript/reference
    This is also helpful: https://developers.google.com/maps/documentation/javascript/maptypes

  4. Hiya there,
    I hope you can help – I’m pulling my hair out trying to find the answer to my question on Google Help sites. Google maps seems to have updated recently, and since the update I can’t find out how to retrieve the html embed code in order to place it on my website – not for the whole of my place map, but for a specific marker on my place map. Do you know if this is still possible, and if so how it can be done? Thanks in advance! Hannah

  5. Hi Hannah:

    You might want to use the Google Maps Builder or another tool like MapBuildr. You will need the Latitude and Longitude of the marker you want the map to center on. Pass this value to the corresponding map center parameter. Both of these should provide you an embed code.

    If you just use Google Maps to search a location or marker, there will be a gear icon in the lower right (on desktop version). Click this. There will be an option to “Share and embed map”. This will give you a link to the map and an embed code.

  6. Pasting above iframe example into a HTML file doesn’t work. So attach a well formatted source, please.

    1. Hi Michal:

      Sorry if there was confusion. The first code block isn’t meant to be copy-pasted. The formatting is intentional so that users could find the specific part of the embed code they get from Google Maps. (The q= part of the embed code.)

  7. I am looking to put a embeded map on the screen with specific coordinates but custom title.

    https://www.google.com/maps/embed/v1/place?q={{latitude}},{{longitude}}&key={{google_api_key}}&w=100%&h=450

    This is working, but the title on top left corner is latitude & longitude. I want to pass it my own.

    1. Hi Amit:

      If you look at the project I did here: https://www.lockedownseo.com/adding-custom-styles-to-google-maps/, you’ll see I used JavaScript to set up custom locations (with titles) in an array.

      You will probably have to do something similar. The embeds you get straight out of Google Maps have the default titles.

      I did see this on Stack Overflow(https://stackoverflow.com/questions/25853143/google-embed-api-custom-title, so try this as well:
      https://www.google.com/maps/embed/v1/place?q={{latitude}},{{longitude}}+(My%20Business%20Name)&key={{google_api_key}}&w=100%&h=450

Join the Conversation

Your email address will be kept private. Required fields marked *.