Skip to content
View in the app

A better way to browse. Learn more.

Thailand News and Discussion Forum | ASEANNOW

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Google Map Api

Featured Replies

Hi

Here's a little problem that's driving me nuts. I'm sure that someone will take a look and see the problem straight away.

I want to display a Google Map starting with one location and then let a user click a link to change to a different location.

The code below is based on an example I found on the web. I added the two parameters sLat and sLong.

When I click the Paris link, it briefly displays Paris CDG then reloads back to Heathrow! Grrrr...

Any ideas?

<!-- #include file="GoogleAPIKey.asp" -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Google Maps JavaScript API Example</title>
   <script src="http://maps.google.com/maps?file=api&v=2&key=<%=GoogleAPIKey%>" type="text/javascript"></script>
   <script type="text/javascript">
   //<![CDATA[

  function load(sLat, sLong, Locn) {
    var WINDOW_HTML = '<div style="width: 210px; 	padding-right: 10px">' + Locn + '</div>';		
    if (GBrowserIsCompatible()) 
    	{
    	sLat = parseFloat(sLat);
    	sLong = parseFloat(sLong);
      var map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(sLat, sLong), 13);
			var marker = new GMarker(new GLatLng(sLat, sLong));
			map.addOverlay(marker);
			GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(WINDOW_HTML);
	  });
			marker.openInfoWindowHtml(WINDOW_HTML);			
      }
    }
   //]]>
   </script>
 </head>
 <body onload="load('51.47063', '-0.45179', 'London Heathrow')">
   <div id="map" style="width: 600px; height: 600px"></div>
   <a href="" onClick="load('49.01425', '2.54125', 'Paris CDG');">Paris</a>
 </body>
</html>

  • Author

Oh &lt;deleted&gt;. I was reading my post to check that it was correct and noticed my problem. I forgot to put a # in the href="#". Doh!

"return false;" after the load in the onclick should also do it.

The rest of the code looks ok and if you said you fixed it I guess it does the job.

There is however a lot more that you could take advantage of.

Custom icons, settings for scroll wheels, zoom levels for starters.

Depends what your using it for, but the maps API is very powerful.

Create an account or sign in to comment

Recently Browsing 0

  • No registered users viewing this page.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.