Google maps Info Window Overlay content just like

Question

I want have the info window content for a marker just a s below

My code so far is

loadEmbeddedMap : function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initEmbeddedMap";
        document.body.appendChild(script)
    },
    initEmbeddedMap : function() {
        var myLatlng = new google.maps.LatLng(40, -80);
        var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("embeddedGoogleMap"), myOptions);
        geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': $('#userMapAddress').val()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
                console.debug(results[0]);
                infowindow = new google.maps.InfoWindow();
                var infoWindowContent = "<div><strong>Address:</strong></div>";
                infoWindowContent    += "<div>"+results[0].address_components[0].short_name+","+results[0].address_components[1].short_name+"</div>";
                infoWindowContent    += "<div>"+results[0].address_components[5].short_name+","+results[0].address_components[7].short_name+"</div>";
                //infoWindowContent    += results[0].formatted_address;
                infowindow.setContent(infoWindowContent);
                infowindow.open(map, marker);
            } else {
                //alert("Geocode was not successful for the following reason: " + status);
            }
        });
        $('#embeddedGoogleMapWrapper').show();
    },

Code above outputs this

How to get those 'Directions', 'Search near by' stuffs..? Any helps appreciated..

Answer 1

I would start by reading

http://code.google.com/apis/maps/documentation/localsearch/devguide.html#hiworld

As i can see it is possible to do what you want. I cant get you a straight answer but maybe a clue. I would create my own form in infowindow at least pretty close to the original google one and handle click events by sending those search queries. Than you need to handle search results

http://code.google.com/apis/maps/documentation/localsearch/devguide.html#handle_search_results

Do some testing with

http://code.google.com/apis/ajax/playground/#the_hello_world_of_local_search

For example you can get lat from localSearch.results[i].lat and so on.

I hope you can get something out of this