Quick Noob Q

Shane McCarthy

unread,

Dec 19, 2011, 6:45:22 PM12/19/11

to google-map...@googlegroups.com

Hi!

I'm a engineering student trying to integrate some coding into my final year project, (because lets face it i'm f*cked for a job after college and having some IT under the belt could help) I started to learn HTML and Javascript this morning and was following the Developers Guide but i've been stuck on this for the past 3 hours:

This works fine:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAuuiTol7PVjQZp0y1nWVmnLtoHXCOK4Qg&sensor=true">
</script>
<script type="text/javascript">

var map;
var latlng = new google.maps.LatLng(51.89784,-8.477976);

function initialize() {


    var mapOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);


        }

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
}

My problem: I can't style the bass map using the given code in the Developers guide. I understand the Array and the terms in it. But i can't seem to integrate it with my code above without the .html not opening. (Its also the same for tilt, i write in just the few more lines of code and the .html page won't open with a map in it. No error just no map)

var pinkParksStyles = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },
  {
    featureType: "poi.park",
    stylers: [
      { hue: "#ff0023" },
      { saturation: 40 }
    ]
  }
];

map.setOptions({styles: pinkParksStyles});

I've tryied this also but i still can't get it working:

var map = new google.maps.Map(document.getElementById("map_canvas"), 
    {center: new google.maps.LatLng(0,0),
     styles: [{featureType:"administrative", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:22},{lightness:-5}]}]
    });

I'm using Notepad++ to write the code and firefox to open it. I'm aware that this is a new dimension of noob!

Daniel Schramm

unread,

Dec 20, 2011, 2:25:12 AM12/20/11

to google-map...@googlegroups.com

Hi Shane,

I think your problem is caused by the lack of zoom and mapTypeId properties when creating your map. The required properties for MapOptions are center, zoom and mapTypeId - see http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions for a full list of properties.

The following javascript works for me:

var map;

function initialize() {

var pinkParksStyles = [

{

featureType: "all",

stylers: [

{ saturation: -80 }

]

},

{

featureType: "poi.park",

stylers: [

{ hue: "#ff0023" },

{ saturation: 40 }

]

}

];

var map = new google.maps.Map(document.getElementById("map_canvas"),

{center: new google.maps.LatLng(51.89784,-8.477976),

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP,

styles: pinkParksStyles

});

}

I hope that helps.

Regards,

Daniel.

Rossko

unread,

Dec 20, 2011, 5:01:12 AM12/20/11

to Google Maps JavaScript API v3

Start here at 'READ THIS FIRST'
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2b3f101fd509919e
out of context snippets don't help you much

Shreerang Patwardhan

unread,

Dec 20, 2011, 10:40:19 AM12/20/11

to google-map...@googlegroups.com

Hello Shane,

Following is the code that you are looking for:

<html>
<head>

/script>

var pinkParksStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},
{
featureType: "poi.park",
stylers: [
{ hue: "#ff0023" },
{ saturation: 40 }
]
}];

var mapOptions =
{
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

map.setOptions({styles: pinkParksStyles});

}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Few things that you need to understand:

1. There is no need of a key when you are using google maps api v3. A key is required with google maps api v2.

2. Indent your code properly, so that you will be able to see your own mistakes. A lot of mistakes and errors in codes are due to typos. Use proper indentation to avoid these issues.

3. Start with simple examples of Google maps api v3. Then you can move on to setting up your own code. You can have a look at a lot of simple example codes on my blog.

Hope this helps! All the best with your project. Do share, what your project is about!

Regards,
Shreerang.
Spatail Unlimited<http://shreerangpatwardhan.blogspot.com/>

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/0X3MXQLoCsoJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

--

Shreerang Patwardhan

GIS Engineer

RMS India

A-7, Sector - 16

Noida 201301, India

Email: patwardhan...@gmail.com

Company website: www.rms.com

Personal website: Spatial Unlimited

image001.jpg

Rossko

unread,

Dec 20, 2011, 2:23:46 PM12/20/11

to Google Maps JavaScript API v3

> 1. There is no need of a key when you are using google maps api v3. A
> key is required with google maps api v2.

A key has been recommended for v3 for some time now
http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Obtaining_Key

JFrancis

unread,

Dec 21, 2011, 9:31:49 AM12/21/11

to google-map...@googlegroups.com

Say what now? One of the big selling points of v3, touted early and often, was the elimination of the need for an API key.

When did this recommendation first appear, and if it has been indeed for some time now, why have none of the v3 sample maps been updated to reflect this change in policy? For that matter, why does the "Hello, world" example map right below your link (http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html) NOT include code for a v3 API key?

JF

Rossko

unread,

Dec 21, 2011, 2:46:38 PM12/21/11

to Google Maps JavaScript API v3

> When did this recommendation first appear

I would imagine it ties in with this blog post
http://googlegeodevelopers.blogspot.com/2011/11/understanding-how-maps-api-usage-limits.html

JFrancis

unread,

Dec 21, 2011, 3:01:04 PM12/21/11

to google-map...@googlegroups.com

I'm not seeing any reference to the API key in this document.

If I click on the update link (http://googlegeodevelopers.blogspot.com/2011/10/introduction-of-usage-limits-to-maps.html) and click the limits link (http://code.google.com/apis/maps/faq.html#usagelimits), I am taken to the FAQ page, where the following is displayed in two places:

Note: Google Maps API keys are only required when using the JavaScript Maps API V2 and the Maps API for Flash.

Nowhere in any of these documents am I able to find a recommendation to acquire an API key for v3.

JF

Andrew Leach

unread,

Dec 21, 2011, 3:57:20 PM12/21/11

to google-map...@googlegroups.com

On 21 December 2011 20:01, JFrancis <jfra...@mge.com> wrote:
>
> Nowhere in any of these documents am I able to find a recommendation to
> acquire an API key for v3.

Might be something to ask Chris Broadfoot and Luke Mahe?

https://plus.google.com/104108470253317688307/posts/YZNomutHq5U

I think 1100-1200 AEST on Thursday and 1500-1600 PST is 2300-2400 GMT
tonight (a couple of hours' time), so I might not be joining in!

MymsMan

unread,

Dec 21, 2011, 5:32:39 PM12/21/11

to google-map...@googlegroups.com, andrew....@gmail.com

It might be an idea for Thor to update his post telling people to remove the key parameter with the new recommendation to use a V3 API key.
https://groups.google.com/d/topic/google-maps-js-api-v3/oJf7I5FdAdY/discussion

The new API javascript client uses a gapi.client.setApiKey(apiKey); function to pass the API key to google - will this technique work for the Maps API?
I would prefer to use a single method.

davie

unread,

Dec 22, 2011, 5:26:01 AM12/22/11

to Google Maps JavaScript API v3

Hi

> Nowhere in any of these documents am I able to find a recommendation to
> acquire an API key for v3.

Once you’ve created an APIs Console account, please follow the
instructions in the Maps API documentation to enable Maps API v2 or
Maps API v3 on your APIs Console Project, and update your application
to provide your APIs Console key when loading the Maps API.

Regards Davie

Jonathan Callahan

unread,

Dec 27, 2011, 3:11:33 PM12/27/11

to google-map...@googlegroups.com

Wow! What a mass of confusion!!!

I had to search around for over an hour through lots of conflicting information to arrive at this thread that (I'm guessing) has the latest and most correct version of the information.

I'm sure there are a lot of folks like myself that dabble with Google Maps and learned how to use the API v3 when it required no key and would be very surprised to hear that this has changed.

I do not doubt that people have been abusing the Google Maps service and that accounts are needed to keep track of usage. But you are going to waste hundreds of thousands of hours of others' time and generate a lot of developer frustration if you don't make people immediately aware of this significant change with clear, concise and consistent documentation.

I have always been very impressed with how well thought out the GoogleMaps API was, how easy it was to use and how complete the API documentation has been. I know that the key/account issue is really a business issue rather than a developer issue but it needs to be documented with the same care and consistency as everything else. It will probably take 3 or 4 people a single day to comb through the documentation and clean it up. But that effort will save orders of magnitude more time in avoided confusion on the part of others.

Please, please, sort this out and include a special update/section/blog post describing precisely how things have changed since V2 so that each developer can figure out what they understood when and how things are different now.

You won't regret any effort you put into this.

Thanks,

Jon

Shane McCarthy

unread,

Dec 28, 2011, 10:33:40 AM12/28/11

to google-map...@googlegroups.com

Thanks all for the replies, i resolved the issue before this got posted so i forgot to reply.

I've really tried to immerse myself in the google maps javascript api over the past 9 days and have been blown away by the opportunities present by its features, most of all i've enjoyed getting a handle on writting code.

So much so that the project has changed its focus. I'm hoping to create a series of maps visualizing; Irelands current energy use, Irelands Future Energy Use (2020 & 2050) and various other scenarios. The hope is to show the general public and policy makers alike the location of energy sources and size of land required to meet Irelands energy needs. I'm also looking into a few interactive maps that could help possible wind farm developers. There's a problem with a lack of freely available information here at the moment that is helping to slow progress in the energy industry so i'm hoping this will help change that.

So thanks again for the help and i'll be sure to keep you posted!
Shane

Reply all

Reply to author

Forward