Solved

Implementing jQuery and Google Maps API 3

Posted on 2011-03-20
6
557 Views
Last Modified: 2012-05-11
Experts,

I need to embed Google Maps on a web page.

I was able to get the basic map using an <iframe>, but the rendering was cludgy and slow.

I love the brevity and elegance of jQuery.  I've found lots of cool demos and plugins, but I can't get a single one to give me an actual map on my page.  Lots of them use API v. 2, which is deprecated.  I'd like to use the new version.

Can anyone point me to some well-documented examples and plugins that actually work?  I need good examples to get started.  Slow learner!

Capt
0
Comment
Question by:Glen Gibb
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35183537
I am using jquery and api v3 on this page:

http://www.bluerailsolutions.com/hockettes/About_Venues.aspx?v=1

There are more details of course, but as a proof that it's possible here ya go.

What I'm doing here is reading the id from the querystring, executing a .get() to fetch the venue details, then populating the map details based on the returned values.
0
 

Author Comment

by:Glen Gibb
ID: 35183824
This is exactly the sort of effect I need!

Glad to see you got it!  Now how do I do the same?

Capt
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 500 total points
ID: 35184168
Let's get you up and running.  See if this works for you locally.  Then we'll talk about the fancy stuff.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Google Map Example</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

	<style type="text/css">
     html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 60%; width: 50%;margin: 10px auto; }

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

    var VenueDetails = new Object()
    VenueDetails = [
    {
        "venueid": "",
        "longitude": -95.677068,
        "latitude": 37.0625,
        "venuename": "",
        "address1": "",
        "address2": "",
        "city": "",
        "state": "NY",
        "zipcode": "",
        "phonenumber": "",
        "description": "",
        "url": "",
        "status": ""
    }
]


    $(document).ready(function () { 
        initialize()
    })

    function initialize() {

        var latlng = new google.maps.LatLng(VenueDetails[0].latitude, VenueDetails[0].longitude);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }

</script>

</head>
<body>
    <div id="map_canvas">
 
    </div>
</body>
</html>

Open in new window

0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:Glen Gibb
ID: 35184845
Woo hoo!

Now I need to know more about those latlng values.  The ones I've seen look more like 50 degrees 50.025 N  112deg 14.600 W.

The ones you show look a bit different.

Can you help me figure out how to move these map coordinates?

Capt
0
 
LVL 16

Assisted Solution

by:Steve Krile
Steve Krile earned 500 total points
ID: 35184879
I just use the maps.google.com site to look things up, then click the "link" button and pick out the long and lat attributes.
0
 

Author Closing Comment

by:Glen Gibb
ID: 35184978
Great help!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question