To get this multi-pin map to work you need to;
1/ put the WWB HTML object onto your page (for those totally new to this stuff it is found in the WWB ToolBox which is on the left side ).
2/ Next you have to use the Properties window of WWB to rename the HTML id to "map_canvas". (the properties window is normally on lower right).
3/ Now dump all the code below into the Page HTML insertion point called "Between <head></head> tags".
3a/ Publish the page and set up a button to call it. You should get a map with 5 pins/markers.
(The WWB "preview in the browser" feature won't work. Probably because you need to be online.)
4/ Use Google searches to study all the commands fully until you understand them (always a wise thing to do in case problems occur). (put a comment on every line as a measure of this)
5/ Study the above page at the link I gave to try and learn how to use your PHP code to create the JSON input to the loop that puts the map pins on the map.
I have done everything except #5 and it works perfectly. I am pretty sure the code at the top will get all the source javascript and CSS properly for you.
I tested the above procedure on another page just to make sure I did not drop any code by accident and it worked perfectly (I am running Google Chrome).
I also did a test with a quote in the location field. For example "Marry's House" and it was okay (no need to escape it with \).
When this shows the map properly you can try these things.
1/ hover over each of the map markers to see the location and address information.
2/ if you click the marker it will use the window.location command to try and call a .php page. So you need to study that and modify your code if you want that type of function.
3/ try adjusting the address and the map should re-size and center perfectly on the next publish of the page and display.
For example, change "600 Young Street" to "4000 Young Street" and your map should be big enough to still show the 5 map markers.
NOTE: Every so often the page will not re-size properly when you are changing addresses like this.
It always seems to work properly if you try again. Why this happens I do not know.
4/ Try submitting only one button by moving out all but the bottom line of JSON data input (obviously comment the lines you move away).
By keeping the bottom line you avoid having to worry about the removal of the comma at the end of the line (it is already not there).
You should get a smaller zoom but not too small. If you remove the code near the bottom of the script below you will see what happens.
Code: Select all
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.1.js'></script>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<!--
Further tests suggest this command is not needed.
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
I have commented it out because of the problems I mentioned in post #3 below.
-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
var DataCnt = 0;
var map;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
//START: hard coded JSON Input Data for doing tests
var InputData = [
{"KeyData":"1", "LocData":"Location1, XXX=5 Address:", "addresses":"300 Queen St W, Toronto, ON, Canada"},
{"KeyData":"45", "LocData":"Location2, XXX=15 Address:", "addresses":"194 Queen St W, Toronto, ON, Canada"},
{"KeyData":"33", "LocData":"Location3, XXX=1 Address:", "addresses":"44 King Street, Toronto, ON, Canada"},
{"KeyData":"7", "LocData":"Location4, XXX=8 Address:", "addresses":"300 Young Street, Toronto, ON, Canada"},
{"KeyData":"22", "LocData":"Location5, XXX=4 Address:", "addresses":"600 Young Street, Toronto, ON, Canada"}
];
//END: hard coded JSON Input Data for doing tests
var bounds = new google.maps.LatLngBounds(); //Create the empty bounds
for (var x = 0; x < InputData.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+InputData[x].addresses+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
bounds.extend(latlng); //extend the bounds to include each marker's position
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: InputData[DataCnt].LocData + InputData[DataCnt].addresses
});
var EachDataKey = InputData[DataCnt].KeyData;
google.maps.event.addListener(marker, 'click', function() {
window.location=("frmYourPage.php?GoogleMarkerKey=" + EachDataKey); //Call a page with the record key inside the google marker
//alert("whatever you want to alert about the button");
});
DataCnt = DataCnt + 1;
});
}
if (bounds != undefined) {
map.fitBounds(bounds); //now fit the map to the newly inclusive bounds
}
//START: code that resizes your map a bit bigger if you have only one marker and it is way too small. Saves the viewer from having to zoom out
var listener = google.maps.event.addListener(map, "idle", function() {
if (map.getZoom() > 16) map.setZoom(13);
google.maps.event.removeListener(listener);
});
//END: code that resizes your map a bit bigger if you have only one marker and it is way too small. Saves the viewer from having to zoom out
});
});//]]>
</script>
