Google Maps Top Left Info Box

Question

I'm battling to find documentation on the element of a google map that I would like to include.

I have a basic google map in my website

  function f_init_map() {

     var lv_container = document.getElementById('map_container');

     var lv_coords = new google.maps.LatLng(-29.801270, 30.717932);

     var lv_settings = {
        center: lv_coords,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     }

     var lv_map = new google.maps.Map(lv_container, lv_settings);

     var lv_marker = new google.maps.Marker({
        position: lv_coords,
        map: lv_map,
        title: 'Nowhere',
        icon: 'images/marker_01.png'
     });

  }

  google.maps.event.addDomListener(window, 'load', f_init_map);

which is great but I would like to include the info box that some maps have that normally shows up in the top left hand corner and usually has the address as well as buttons for 'Directions' and 'Save'.

How will I be able to include this info box?

I found an example of the map info box

http://www.stortown.co.za/self-storage-hillcrest/

@Sherlock hello there, I used this site https://developers.google.com/maps/documentation/embed/start. Enter the address into the Highlight a place or address field then click looks good and it will generate the map for you. It is limited design wise but what it gives you is really good — TheLovelySausage, Sep 19 '16 at 06:40
but the address is dynamic in my case, I'd used this one instead http://jsbin.com/sacerupico/edit?html,css,js,output Thanks for the respond — Anonymous Duck, Sep 19 '16 at 06:51

bcdan · Answer 1 · 2015-07-29T12:59:08.403

Google Maps JavaScript API

You will have to use HTML, since that is not part of the loadable Google Maps Interface.

Something like this will probably work:

<div id="wrapper">
  <div id="map_container"/>
  <div id="topleft">
    <!--Elements to contain inside-->
  </div>
</div>

And then for basic CSS:

#topLeft {
  width:300px; /*or something*/
  height:150px;
  position:relative;
  top:20px;
  left:20px;
}

This code creates a div with a relative positioning, which will align it to fixed coordinates inside the parent element.

If you wanted something approximating what Google Maps has, you should probably go into the source code, duplicate duplicatable elements of the HTML, and see if you can pull out some of the style elements from the source, also.

Google Maps Embedded Map

A more direct approach is to use the Google Maps Embed feature. An example embed URL is: https://maps.google.co.za/maps?q=127+Brackenhill+Road,+Hillcrest,+KwaZulu-Natal&hl=en&sll=-29.865954,31.002399&sspn=0.008346,0.016512&hnear=127+Brackenhill+Rd,+Waterfall,+Hillcrest,+Durban+Metro,+KwaZulu-Natal+3610&t=m&z=17&iwloc=lyrftr:m,4165039167454636329,-29.737933,30.801362&t=m&z=14&output=embed

The box is included by default.

I added an example I found online in my question, hopefully it will make it a little clearer — TheLovelySausage, Jul 29 '15 at 12:48
I see. I gather that the map in your example is an embed map. From looking at some examples (https://developers.google.com/maps/documentation/embed/start) as well as the source code for your example, the box is included in an embed by default. — bcdan, Jul 29 '15 at 12:56

Google Maps Top Left Info Box

1 Answers1