Solved

Implementing jQuery and Google Maps API 3

Posted on 2011-03-20
6
562 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Rotate images for Web Page 11 40
Expanding/Collapsing Tree on SharePoint List 29 66
Secure registration PHP 7 43
My tooltip is not displaying correct 11 19
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

751 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