New to JavaScript, and what I’m doing below seems right from all the Google RTFM’ing I’ve been doing, but it isn’t working. So I decided to reach out for help since I’m stuck.
I have a JavaScript that lives in my HTML’s < head> document…
<script type="text/javascript" src="http://example.com/scripts/scripts.js"></script>
The contents are the Google Maps API. Previously I’ve had the JavaScript run from a DIV onMouseOver. This way I could run the script multiple times – because I need multiple different maps per page (it’s a photoblog). I know the script works, because it’s working today.
<div class="location" onmouseover="initalizeMap('gmaps1832588575', '42.102500,-72.587333')"></div>
I am trying to figure out how to have this script called from outside of a div. For example, a static div that always displays the map. So, I was under the impression I can move the initializeMap function out of the onmouseover, and into it’s own < script> section. However, it’s not working. Here’s what I have:
<div class="location">
<a href="http://maps.google.com/maps?q=40.756167+-73.978833&z=14" target="_blank">New York, NY, US</a>
<script type="text/javascript" language="JavaScript">initalizeMap('gmaps2021396674', '40.756167,-73.978833');</script>
<div class="map_holder">
<div class="map" id="gmaps2021396674">
</div></div></div>
Like I said, I need this to run multiple times, and this code works when I call on it from a div onMouseOver.
When you put code inside a script tag within the page, it runs as soon as that script tag is loaded. This may be before the div it is referring to has been loaded, so it doesn’t work because it’s running too early (the mouseover approach worked because you can’t do your mouseover until the qhole page loads).
You can try moving your script tag to the end of the page, or you can trigger it from the HTML body tag’s onload event, or you can look at jQuery and use $(document).ready().