Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Implementing jQuery and Google Maps API 3

Posted on 2011-03-20
6
Medium Priority
?
570 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 2000 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

688 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