Solved

Implementing jQuery and Google Maps API 3

Posted on 2011-03-20
6
551 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now