Hi All i have made all the necessary modification to change to Gmap3 but m not google map is Coming Blank

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsa7Q4gy5pzrZzsGkUxhRauOw12gtk9CA&sensor=false"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/jquery-1.4.4.min.js')}"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/gmap3.js')}"></script>    
    <style>     
      #googleMap{
        border: 1px solid #000;
        width: {!width};
        height: {!height};

Hi All m using a Jquery Plugin in my Visualforce component to integrate with GoogleMap.  I have provided all Google API key as well as the resource link but m not able to see the MAP in the vf page. I am new to this and stil in learning phase.

Below is the  Visual force component that i used to call the Jquery plugin and also the Google Map API.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyAsa7Q4gy5pzrZzsGkUxhRauOw12gtk9CA"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gmap3,'gMap/jquery.gmap3.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gmap3,'gMap/jquery.jquery-1.4.4.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gmap3,'gMap/jquery.gmap3.js')}"></script>


<style>
.sfgmap {
    border: 1px solid #000;

}
</style>
<div id="map" style="width:{!width}px;height:{!height}px;" class="sfgmap"></div>
<script type="text/javascript">
var addresses = new Array();
var defaultaddress = '';
if("{!default}" != ""){
    defaultaddress = "{!default}";
}else{
    defaultaddress = "{!addressmodel.default}";
}
<apex:repeat value="{!addressmodel.addresslist}" var="address">
    var addObject = new Object();
    if("{!uselatlng}" == "false"){
        addObject.address = "{!address.address}";
    }else{
        addObject.latitude = "{!address.lat}";
        addObject.longitude = "{!address.lng}";
    }
    addObject.html = "{!address.info}";
    addresses.push(addObject);
</apex:repeat>
$(function() {
    $("#map").gmap3({ markers: addresses,
                  address: defaultaddress,
                  zoom: {!zoom} });
});
</script>
</apex:component>

Hi all

I've created a Visualforce page that call a visualforce component and utilizes the Google Maps API to display the  map  with the address details that user enter.  But m getting an error  ----------This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key.

But in my code ....m not using any specific key instead m using   key=API_KEY"  and  calling a static resource...gmap ....

Please help how to sort out the error and why the error is coming.....Thanks..

<apex:component >
<apex:attribute name="width" type="integer" description="width of the map in pixcel"/>
<apex:attribute name="height" type="integer" description="height of the map in pixcel"/>
<apex:attribute name="addressmodel" type="AddressModel" description="all addresses need to show on map"/>
<apex:attribute name="uselatlng" type="boolean" description="check to see if use lat lng or address"/>
<apex:attribute name="zoom" type="integer" description="zoom level for google map"/>
<apex:attribute name="default" type="string" description="default address where map will be center on load"/>


<!--
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD67mEyD1KpvIX6Tj3wddFW9wSbWU3_-lI&sensor=false"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQQrSCG2uOqUb8x7t3Qb8GnFBbBQ1k8sU&sensor=false"  type="text/javascript"></script>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"  type="text/javascript"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gMapV3,'gMapV3/jquery.gmap.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gMapV3,'gMapV3/jquery.gmap.min.js')}"></script>


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

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY"></script>

<script type="text/javascript" src="{!URLFOR($Resource.gMap,'gMap/jquery.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gMap,'gMap/jquery.gmap-1.1.0.js')}"></script>
<!--
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap.min.js"></script>
-->
<style>

.sfgmap{
    border: 1px solid #000;

}
</style>
<div id="map" style="width:{!width}px;height:{!height}px;" class="sfgmap"></div>
<script type="text/javascript">
var addresses = new Array();
var defaultaddress = '';
if("{!default}" != ""){
    defaultaddress = "{!default}";
}else{
    defaultaddress = "{!addressmodel.default}";
}
<apex:repeat value="{!addressmodel.addresslist}" var="address">
    var addObject = new Object();
    if("{!uselatlng}" == "false"){
        addObject.address = "{!address.address}";
    }else{
        addObject.latitude = "{!address.lat}";
        addObject.longitude = "{!address.lng}";
    }
    addObject.html = "{!address.info}";
    addresses.push(addObject);
</apex:repeat>
$(function() {
    $("#map").gMap({ markers: addresses,
                  address: defaultaddress,
                  zoom: {!zoom} });
});
</script>
</apex:component>

Hi All i have made all the necessary modification to change to Gmap3 but m not google map is Coming Blank

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsa7Q4gy5pzrZzsGkUxhRauOw12gtk9CA&sensor=false"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/jquery-1.4.4.min.js')}"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/gmap3.js')}"></script>    
    <style>     
      #googleMap{
        border: 1px solid #000;
        width: {!width};
        height: {!height};