CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Michael
Michael

Reputation: 2598

JS generated geocode search on top of maps

Google's simple geocode example seems straightforward enough, and that's all the functionality I need out of it. However, I have multiple google maps being generated through qTip tooltips, so I'd like a geocode search field to be on top of each map (not above them). See my current FIDDLE. What's the best way to go about this?

Upvotes: 0

Views: 100

Answers (2)

Michael
Michael

Reputation: 2598

Solved. I basically used jQuery to append my search box to qTip's container and then listened for clicks on the search button with jQuery live(). I'm too lazy to create a new fiddle, but here's some code:

In the "render" event of qTip:

var geocoder;
geocoder = new google.maps.Geocoder();

...

api.map = new google.maps.Map(container[0], myOptions);
$(container).append('<div class="geosearch"><input type="text" class="geosearchinput" value="" /><button type="button" class="geosearchbutton">Search</button></div>');

...

$('button.geosearchbutton').live('click', function() {
    var address = $(this).prev('input.geosearchinput').val();
    geocoder.geocode({ 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            ... add marker and handle markers array ...

        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
});

Upvotes: 0

Heitor Chang
Heitor Chang

Reputation: 6057

Use some appropriate CSS on divs. See here

https://files.nyu.edu/hc742/public/googlemaps/geocodesp.html

You have to uncheck 'SP' for it to work outside my city.

  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  #menu {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
  }
 ... ... ... 

<div id="map_canvas"></div>
<div id="menu">
  <b>address:</b>
  <input id="text_address" type="text" size="60" onkeyup="checkReturn(event)">
  <input id="check_sp" type="checkbox" checked="checked">SP
  <input type="button" value="clear" onclick="document.getElementById('text_address').value=''; document.getElementById('text_address').focus()">
  <input id="button3" type="button" value="clear markers" onclick="clearMarkers()">

</div>

Upvotes: 1

Related Questions