CODEWITHSUNDEEP
javascriptgoogle-maps
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

Google API V3 mouseover and call

I am about to start implementing Google map V3 into a site that has a previous version of google maps.

  1. Is this a hard change to upgrade?

  2. Also do I need to add the api key to the call

    For example:

    the new call

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

    the previous call

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=someKEY">

  3. And lastly I need to hover over a link with an address and the address show up in the map, is that a complex task?

Upvotes: 0

Views: 737

Answers (1)

Daniel Vassallo
Daniel Vassallo

Reputation: 344261

  1. The namespaces, class names, and the architecture of the v3 API changed completely from the v2 API. I wouldn't call an upgrade hard, but it's not trivial. Further reading: Announcing Google Maps API v3.

  2. You do not need an API key for the v3 API anymore. Simply include the script you mentioned in the question.

  3. Geocoding an address on hover is not very difficult. You may want to check out the following example to help you getting started:

Example:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding On Hover</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <ul>
     <li><a href="#" onmouseover="gc(this);">Oxford Street, London, UK</a></li>
     <li><a href="#" onmouseover="gc(this);">5th Ave, New York, USA</a></li>
     <li><a href="#" onmouseover="gc(this);">Via Nazionale, Rome, Italy</a></li>
     <li><a href="#" onmouseover="gc(this);">Rue de Rivoli, Paris, France</a></li>
   </ul>

   <script type="text/javascript"> 
     var address = 'London, UK';

     var map = new google.maps.Map(document.getElementById('map'), { 
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         center: new google.maps.LatLng(40.71, -74.00),
         zoom: 13
     });

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

     function gc(element) {
       geocoder.geocode({
           'address': element.innerHTML
        }, 
        function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) {

            // Clear the previous marker
            if (marker) marker.setMap(null);

            // Set the new marker
            marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map
            });

            // Center the map on the geocoded result
            map.setCenter(results[0].geometry.location);
          }
       });
     }

   </script> 
</body> 
</html>

Screenshot:

Google Maps Geocoding OnMouseOver

Upvotes: 2

Related Questions