close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Google Map Invisible

Thread began 5/20/2015 2:20 pm by david73021 | Last modified 5/26/2015 2:59 pm by Ray Borduin | 717 views | 7 replies |

david73021

Google Map Invisible

Hi there, I can't seem to get my map to show. I've done all the usual including uninstalling the extension and creating a standalone website just encase there was a css issue somewhere. I have also added error reporting <?php error_reporting(E_ALL);ini_set('display_errors','on'); ?>. When I open the page it displays along the bottom of the browser messages relating to contacting Google etc. I have attached the standalone website that I created where I did nothing more than create a php/HTML5 page and then added a map that I kept simple with my address to test it. Set up is Yosemite, Dreamweaver CC, Design Extender 1.2.0 and PHP 5.5.2

Attached Files
maps.zip
Sign in to reply to this post

Ray BorduinWebAssist

Do you have a url where I can view the problem?

Sign in to reply to this post

david73021

url location

Hi Ray, I have posted it up to http://www.businessdirectorylistings.co.uk/bd2015/map.php I'm using the folder bd2015 to create the new site then when it's finished ill be putting it up to http://www.businessdirectorylistings.co.uk/ where you will see from when I first created the website I got maps working easily. The page you see there is what I created from the zip file I sent you above.

Regards,

Dave

Sign in to reply to this post

david73021

Page code

Code on website is below. Essentially as I put i created a new site and did nothing more that create a new php/html5 file and then followed the online video tutorial for a static site. I did it this way just encase of any css factors etc:

<!doctype html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="UTF-8">
<title>Map</title>
<script type="text/javascript">
/*wagmp*/
function WAMapRef(mapObj) {
this.obj = mapObj;
this.directions = false;
this.icons = [];
this.markers = [];
this.addresses = [];
this.points = [];
this.infowindows = [];
this.getPointByAddress = getPointByAddressFunc;
this.openWindowByAddress = openWindowByAddressFunc;
this.addressFailed = true;
return this;
}

function WAMapPoint(theMarker, theAddress, theIcon, theInfoWindow) {
this.icon = theIcon;
this.marker = theMarker;
this.address = theAddress;
this.infowindow = theInfoWindow;
return this;
}

function openWindowByAddressFunc(value,attname) {
var point = this.getPointByAddress(value,attname);
for (var x=0; x < this.infowindows.length; x++) {
this.infowindows[x].close();
}
point.infowindow.open(this.obj,point.marker);
}

function getPointByAddressFunc(value,attname) {
if (!attname) attname = "street";
for (var x=0; x < this.addresses.length; x++) {
if (eval("this.addresses[x]."+attname) == value) {
return WAMapPoint(this.markers[x],this.addresses[x],this.icons[x],this.infowindows[x]);
}
}
return false;
}

function getHTTPObject(){
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false;
}
}
}
return xmlHttp;
}


var cacheDoc = false;
function searchCache(searchStr, zip) {
var xmlDoc = null;
var coordinates = '';
if (!cacheDoc) {
xmlDoc = getHTTPObject();
if(xmlDoc) {
xmlDoc.onreadystatechange = function() {
if(xmlDoc.readyState == 4) {
var x = xmlDoc.responseXML.getElementsByTagName("geocode_entry");
cacheDoc = x;
var geocode, id;
searchStr = searchStr.replace(/,/g, ''); //remove commas
for (i=0; i < x.length; i++) {
id = x[i].getAttribute("ID");
if (id.replace(/\s*/g,"") == searchStr.replace(/\s*/g,"")) {
coordinates = x[i].getElementsByTagName("geocode")[0].childNodes[0].nodeValue;
return coordinates;
}
}
}
}
xmlDoc.open("GET", "webassist/_promaps_cache/_promaps_geocache.xml", false);
xmlDoc.send(null);
}
} else {
searchStr = searchStr.replace(/,/g, ''); //remove commas
var x = cacheDoc;
for (i=0; i < x.length; i++) {
id = x[i].getAttribute("ID");
if (id.replace(/\s*/g,"") == searchStr.replace(/\s*/g,"")) {
coordinates = x[i].getElementsByTagName("geocode")[0].childNodes[0].nodeValue;
return coordinates;
}
}
}
return coordinates;
}

function addToCache(fullAddress,zip, geocode){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("POST", "webassist/google_javascript/promaps_geocache_php.php", true);
httpObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var entryId = fullAddress.replace(/,/g, '');
if (zip != '') {
fullAddress = fullAddress.replace(zip+',', '');
}
entryId = escape(entryId);
fullAddress = escape(fullAddress);
geocode = escape(geocode);
httpObject.send("sender=promapsforgoogle&action=add&entryId="+entryId+"&address="
+fullAddress+"&geocode="+geocode);
}
}

var map1 = false;

function initMap_1(lat,lng) {
// specify map options
/*
The Zoom controls:
SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
DEFAULT picks an appropriate zoom control based on the map's size and the device on which the map is running.

The MapType control:
HORIZONTAL_BAR displays the array of controls as buttons in a horizontal bar as is shown on Google Maps.
DROPDOWN_MENU displays a single button control allowing you to select the map type via a dropdown menu.
DEFAULT displays the "default" behavior, which depends on screen size and may change in future versions of the API

Map Types:
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
*/
var myOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
}
};
// draw the map
map = new google.maps.Map(document.getElementById('wagmp_map_1'), myOptions);

// declare WA custom object to keep track of points
wagmp_map_1_obj = new WAMapRef(map);
return map;
}

function wagmp_add_marker_1(point,infowindow,icon,address,isDefault,fromAddress) {
// create the map marker
var marker = new google.maps.Marker({
position: point,
shadow: icon.shadow,
icon: icon.image,
shape: icon.shape,
title: address.full
});
// create the map if it hasn't been created yet;
if (!map1) map1 = initMap_1(point.lat(),point.lng());

// add the marker to the map
marker.setMap(map1);
google.maps.event.addListener(marker, 'click', function() {
for (var x=0; x < wagmp_map_1_obj.infowindows.length; x++) {
wagmp_map_1_obj.infowindows[x].close();
}
infowindow.open(map1,marker);
});
// open info window for default address
if (isDefault) {
infowindow.open(map1,marker);
setTimeout("google.maps.event.trigger(wagmp_map_1_obj.markers[" + wagmp_map_1_obj.markers.length + "], 'click')",1000);
//map1.setCenter(point);
}
// record marker data to WA object
wagmp_map_1_obj.markers.push(marker);
wagmp_map_1_obj.addresses.push(address);
wagmp_map_1_obj.icons.push(icon);
wagmp_map_1_obj.points.push(point);
wagmp_map_1_obj.infowindows.push(infowindow);
}

function wagmp_map_1() {
// return if display div is not on the page
if(!document.getElementById('wagmp_map_1')) return false;

// define the from address
var fromAddress = {
enabled: false,
street: '',
city: '',
state: '',
zip: '',
country: '',
full: ''
};
// define the addresses
var defaultIndex = 0;
var loopIndex = 0;
var address = new Array();
var icons = new Array();

address[loopIndex] = {
street: '8 Beech Park Road',
city: 'Birmingham',
state: 'West Midlands',
zip: 'B315DB',
country: '',
infowindow: 'default',
infowindowtext: '<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><strong>Address:</strong><br />8 Beech Park Road<br />Birmingham, West Midlands B315DB</span>',
full: '8 Beech Park Road, Birmingham, West Midlands, B315DB',
addressType: 'address',
isdefault: true,
loop: '',
latitude: '',
longitude: '',
markerStyle: 'House',
markerColor: 'Slate'
};

if (address[loopIndex].isdefault && defaultIndex == 0) defaultIndex = loopIndex;

icons[loopIndex] = {
image: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/house_slate.png', new google.maps.Size(25,14), new google.maps.Point(0,0), new google.maps.Point(9,13)),
shadow: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/house_shadow.png', new google.maps.Size(25,14), new google.maps.Point(0,0), new google.maps.Point(9,13)),
shape: {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
}
}

loopIndex++;

// only init geocoder when necessary
var geocoder = false;
for (var addressIndex=0; addressIndex < address.length; addressIndex++) {
// init info window
var infowindow = new google.maps.InfoWindow({
content: address[addressIndex].infowindowtext
});
// search cache for latitude and longitude if not already using coordinates
if (address[addressIndex].addressType == "coordinates") {
var cacheReturn = '';
} else {
var cacheReturn = searchCache(address[addressIndex].full, address[addressIndex].zip);
}
// if we have the latitude and longitude
if (cacheReturn != "" || (address[addressIndex].addressType == "coordinates")) {
if(address[addressIndex].addressType == "coordinates") {
var latitude = address[addressIndex].latitude;
var longitude = address[addressIndex].longitude;
} else {
var latitude = cacheReturn.substring(1,cacheReturn.indexOf(",")-1);
var longitude = cacheReturn.substring(cacheReturn.indexOf(",")+1,(cacheReturn.length)-1);
}
// create the map point
var point = new google.maps.LatLng(latitude,longitude);
// add the marker
wagmp_add_marker_1(point,infowindow,icons[addressIndex],address[addressIndex],(addressIndex == defaultIndex),fromAddress);
} else {
// is an address that needs to be geocoded load geocoder if not already loaded
if (!geocoder) geocoder = new google.maps.Geocoder();
// find lat and long and add the point to the map
doGeocode_1(geocoder,point,infowindow,icons[addressIndex],address,addressIndex,defaultIndex,fromAddress);
}
}
}

function doGeocode_1(geocoder,point,infowindow,icon,address,addressIndex,defaultIndex,fromAddress) {
// get lat and long
geocoder.geocode( {'address': address[addressIndex].full }, function(point, status) {
if (status == "OK") {
// return function for geocode declares the point based on the returned lat and long
var point = new google.maps.LatLng(point[0]['geometry']['location']['lat'](),point[0]['geometry']['location']['lng']());
// add the returned point to the cache
addToCache(address[addressIndex].full, '', point);
// add the marker
wagmp_add_marker_1(point,infowindow,icon,address[addressIndex],(addressIndex == defaultIndex),fromAddress);
} else {
var noZipAddress = address[addressIndex].full.replace((address[addressIndex].zip+','), '');
geocoder.geocode( {'address': noZipAddress }, function(point, status) {
if (status == "OK") {
// return function for geocode declares the point based on the returned lat and long
var point = new google.maps.LatLng(point[0]['geometry']['location']['lat'](),point[0]['geometry']['location']['lng']());
// add the returned point to the cache
addToCache(address[addressIndex].full, '', point);
// add the marker
wagmp_add_marker_1(point,infowindow,icon,address[addressIndex],(addressIndex == defaultIndex),fromAddress);
}
});
}
});
}</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=">/*wagmp*/</script>
</head>

<body><div id="wagmp_map_1" style="width: 500px; height: 500px;"></div>
<script type="text/javascript" src="webassist/google_javascript/wagmp_maps.js">/*wagmp*/</script>
</body>
</html>

Sign in to reply to this post

Ray BorduinWebAssist

It might be a permissions problem with the webassist folder. The extension tries to create an xml document to cache the geocode result for efficiency and it is failing to create it. This causes a javascript error that could explain why the page isn't showing.

If you give me ftp details I can debug this further and test to see if it is the root cause of the problem.

Sign in to reply to this post

david73021

Update info

Have sent the info to you Ray

Sign in to reply to this post

Ray BorduinWebAssist

This was just an issue with it not being able to find the address because you didn't include the country setting. I updated it to include the country and the map shows now.

Sign in to reply to this post

david73021

Worked perfectly

Hi Ray thanks for that. I sometimes get that tied up in the coding that I miss the obvious. Speaking of getting tied up in the coding I noticed that by default the map option is to display in metres. I had a read through the API and found a work around that I a few of your clients may want to know about. If you find the line travelMode: google.maps.TravelMode.DRIVING and add unitSystem: google.maps.UnitSystem.IMPERIAL after the travelMode line you will be able to view the map in miles which many will want.

Thanks for your time,

David

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...