0

I get two error in my console when using google map api :

1-Uncaught ReferenceError: initialize is not defined

2-You have included the Google Maps API multiple times on this page. This may cause unexpected errors any help please ?

JS

<script type="text/javascript">

function initialize() {


 var myLatLng = {lat: 42.52501, lng: 2.938979}; 
     var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng,
    scrollwheel: false,
    draggable:true,



  });
     var image='logo.png';
     var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon:image

  });


}

</script>

HEADER.PHP

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key='YOUR API KEY HERE'"></script>

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

<body  onload="initialize()";></body>
CubeJockey
  • 2,209
  • 8
  • 24
  • 31
hopo
  • 67
  • 1
  • 3
  • 8
  • Is the key a sensitive item? If so you should remove it. Otherwise - nevermind. :-) Ok, I just looked at the two tags. If you just open a new tab and add those two https: links they both load the same thing. That is where your duplicate message has to be coming from. – Mark Manning Jan 31 '16 at 20:56
  • @MarkManning the key from Google Maps JavaScript API, if i remove it , will be not showing maps – hopo Jan 31 '16 at 21:02
  • You get the second error because you are including the API more than once. To fix it, remove one of them – geocodezip Jan 31 '16 at 21:02
  • @hopo : I think this is one of those times you need jQuery's document.ready function to ensure everything has loaded properly before continuing on. I think that is where the Reference Error is coming from. You can also use jQuery's $(window).onload() function instead of having it on the BODY tag. – Mark Manning Jan 31 '16 at 21:03
  • @MarkManning can u give me exemple ? – hopo Jan 31 '16 at 21:06
  • @hopo - I've removed your API key. – Mark Manning Feb 01 '16 at 20:26
  • You have two script tags that import the maps API. Delete the second one. – Jared Smith Jul 20 '18 at 14:15

2 Answers2

-1

This is actually an example. If it turns out to be the answer then you can mark it as such - but this really is an example. You can find out how to load jQuery from the jQuery website and Google also provides a way to load jQuery through Google.

Notes: I just realized that having both of these is overkill. You probably just need the ready() function.

<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT YOUR API KEY HERE"></script>

<!--script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script-->
<script src="http://localhost/test_7/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
function initialize() {

 var myLatLng = {lat: 42.52501, lng: 2.938979};
     var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng,
    scrollwheel: false,
    draggable:true,

  });
     var image='logo.png';
     var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon:image

  });

}

    initialize();
});

</script>

</head>
<body>
test
</body>
</html>

Also, it is just

window.onload()

and not $(window).onload(). Sorry about that! :-)

Mark Manning
  • 1,427
  • 12
  • 14
  • not work i get error :$(...).onload is not a function and not showing map – hopo Jan 31 '16 at 21:19
  • Then take that out and just use the ready() function. Let me go look up the onload jQuery function. BRB. – Mark Manning Jan 31 '16 at 21:21
  • Yes. I just did a Google search and found http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready where they say to just use the ready() function. Also, I'm going to correct my example. – Mark Manning Jan 31 '16 at 21:22
  • @hopo : Did that get it? Or are you still getting errors? – Mark Manning Jan 31 '16 at 21:30
  • @hopo - Not what I meant. Are you still getting errors? If no errors from the above you need to either select my answer as the right answer - or if you figured it out - post the right answer. That being said - are you using FireFox? Do you have Firebug installed? Does it show any other kind of errors? Or have you tried this in IE and used the Developer's tools to monitor the program as it runs? – Mark Manning Jan 31 '16 at 22:31
  • @hopo : Ok. Can you edit your post and put the actual errors you are getting into the original post. Also, highlight them and mark them as code so I can see exactly what you are getting. Thanks! :-) – Mark Manning Feb 01 '16 at 04:22
  • I have the same error , -Uncaught ReferenceError: initialize is not defined – hopo Feb 01 '16 at 11:55
  • @hopo - Ok - I have modified the script above. Check it out. This gives a different error. It is saying "a" is null and "d" is null but there is no error on loading google maps. I'm going to go look at google maps now to see why you had two requests in the first place. – Mark Manning Feb 01 '16 at 17:26
  • @hopo - The reason I'm getting the error messages is because I don't have a "map" area defined. so the above should work for you. By the way - your API key should not be given out. You should remove it and I'm going to remove it from my answer. – Mark Manning Feb 01 '16 at 17:36
  • Importing all of jquery just to do an onload? That's not particularly good advice... – Jared Smith Jul 20 '18 at 14:15
-1

Just Replace

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

with

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

Just Replace

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key="></script>

with

<script type="text/javascript" src="//https:maps.google.com/maps/api/js?libraries=places&key="></script>

remember to add your google api key
Adil Rana
  • 1