Solved

Implementing jQuery and Google Maps API 3

Posted on 2011-03-20
6
565 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

627 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