Google Maps API - undefined ROADMAP property?

Question

I'm implementing two different kinds of google maps in my site.

1. The first simply shows pre-defined locations with markers using a MapTypeID of:

   mapTypeId: google.maps.MapTypeId.ROADMAP

2. The second allows the user to interact by dragging/dropping markers on the map etc.

I'm calling my API like so:

<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ABQIAAAAfK8z5AsiUZwKZF5CkZMF6BTAb5FWVJrlydeWm3IWDEdBI1HaUhTpyn3_qR2q3IPbPnQKou9lkKVqIA" type="text/javascript"></script>

When launching my first map I get this error:

Uncaught TypeError: Cannot read property 'ROADMAP' of undefined

If I load the Google Maps API an alternative way like so:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

The error from the first map goes away but I now get this error when launching my second map:

Uncaught ReferenceError: GOverlay is not defined
Uncaught ReferenceError: GControl is not defined
Uncaught ReferenceError: GControl is not defined
Uncaught ReferenceError: GCopyright is not defined

I think the issue has to do with one maps requiring an older version of the google maps API. Is it possible to load two seperate google maps API?

Thanks

Solution 1

google.maps.MapTypeId.ROADMAP is a Google Maps v3 thing but everything else you have going on is a v2 thing. Try google.maps.MapType.G_NORMAL_MAP instead. (Then, think about upgrading the whole thing to v3.)

Solution 2

If your using Google Maps v3

The javascript include for the google maps api has changed:

Instead of: http://maps.google.com/maps/api/js?sensor=false

there must be: https://maps.googleapis.com/maps/api/js?sensor=false

please refer this link https://developers.google.com/maps/documentation/webservices/