Render google map in wordpress, based on address custom field - javascript

I have a wordpress site with a large number of pages, each page represent a physical location. Now for each page I would like to display a google map based on the address. I know I can do this by installing for instance the Geo Mashup plugin http://wordpress.org/extend/plugins/geo-mashup/ but that requires (I believe) that I manually, for every post, create a location based on the address and add a shortcode to the post/page that results in a google map. This is a LOT of work for this site with hundreds of locations.
I would like to be able to
A: Create an "address-custom-field"
for each post programmatically.
B: In
a page template use that custom field
to render a google map.
A is easy, but B?

You may want to consider using the Google Maps API.
The following example may help you getting started. All you would need to do is to change the JavaScript variable yourAddress with the address of the location feature in your page. "If A is easy", that should be quite straight-forward.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var yourAddress = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(yourAddress, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
});
}
</script>
</body>
</html>
The above example would render a map like the one below:
Render google map in wordpress, based on address custom field http://img716.imageshack.us/img716/7267/london.jpg
The map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address.

This is now obsolete Google removed services for v2.
Use something like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Related

Using MapBox for Geolocation in html

I would like to display the address on dynamics CRM using MapBox API, i
have used Google API and it works perfectly, but now i would like to display it using map box.
I have looked at the forward geo-location feature of Mapbox but it's not yet clear.
So my variable my address variable will be coming from a field.
e.g var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a geocoder</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-79.4512, 43.6568],
zoom: 13
});
var address = "6 Antares Drive, Ottawa, Ontario K2E 8A2, Canada";
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.query(address); // how do i search and display this address
map.addControl(geocoder);
//map.addControl(new MapboxGeocoder({
// accessToken: mapboxgl.accessToken
//}));
</script>
</body>
</html>
How can the address be displayed similar to that of google map on the Html Page.
mapbox-gl-geocoder is a geocoder control for Mapbox GL JS, it's intended to provide a the user interface, that is, an input search box for searching on top of the Mapbox Geocoding API.
If you already have your query and just want to display that location on the map you're better to use the Mapbox JavaScript SDK with geocodeForward, see https://github.com/mapbox/mapbox-sdk-js#installation.
The Console.Log was very helpful, I found out that the data.features.center returns the coordinates which was all what i needed . the full code is below
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body style="word-wrap:break-word;">
<div id='map'></div>
<script src='https://unpkg.com/mapbox#1.0.0-beta9/dist/mapbox-sdk.min.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
console.log(mapboxgl.accessToken);
var client = new MapboxClient(mapboxgl.accessToken);
console.log(client);
var address = 't5h 0k7'
var test = client.geocodeForward(address, function(err, data, res) {
// data is the geocoding result as parsed JSON
// res is the http response, including: status, headers and entity properties
console.log(res);
console.log(res.url);
console.log(data);
var coordinates = data.features[0].center;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: coordinates,
zoom: 14
});
new mapboxgl.Marker()
.setLngLat(coordinates)
.addTo(map);
});
</script>
</body>
</html>

stack overflow error creating markers

I am using google maps javascript api V3 to create maps in our adobe flex based application. I am using flex iframes to communicate between flex and javascript api. I am having two issues.
I call a function in html file to create the map in div tag in html. Then map shows up but when I call another function to create the marker, I get stack overflow error. On analyzing this issue I found that somehow it is unable to get the reference of map which was created previous method. Is there a way to resolve this. Please find the code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"
type="text/javascript"></script>
</head>
<body>
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
<script type="text/javascript">
var map;
var DFWCenter = new google.maps.LatLng(32.9017,-97.0405770);
function showMap()
{
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
}
function createCustomMarker(station,lat1, lang1){
var marker= new google.maps.Marker({
position: new google.maps.LatLng(lat1,lang1),
map: map
});
marker.setMap(map);
}
</script>
</body>
</html>
#deejay: If you r not getting the reference of map, u can try this by taking it as a global variable, I tried this and was not able to produce your case as it was working simply fine, when I first call showMap() and then createCustomMarker().
Check fiddle.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var DFWCenter = new google.maps.LatLng(32.9017, -97.0405770);
function showMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: DFWCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
});
createCustomMarker(DFWCenter.A, DFWCenter.F);
}
function createCustomMarker(lat1, lang1) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat1, lang1),
map: map
});
marker.setMap(map);
}
</script>
</head>
<body onload="showMap()">
<div id="map-canvas" style="width: 650px; height: 250px;"></div>
</body>
</html>

Google Maps Javascript API mobile performance issue

I'm trying to build a mobile application using Google Maps Javascript API v3. Functionally, it's doing fine, but the performance is really sluggish on middleware Android devices (used Samsung Galaxy 3 for testing).
I also checked the performance on the official http://maps.google.com, had the same result, and using the first example code as well. Is there any mobile specific step, I might have missed (see the example code), or the Javascript API performance is limited to this level, and building a native application cannot be avoided in this case?
Thank you very much for the answers!
Here is the code of the linked page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
As per official documentation, your code is right. And maps is optimized.
I suggest:
Try to change the script URL to http://maps.googleapis.com/maps/api/js?sensor=false
Load scripts at end of page.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width: 100%; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Try the demo out at http://fiddle.jshell.net/tomasdev/8FhYz/show/light/ — I'm in doubt regarding your device. If official demos work slow, I don't think there is a quite good solution.
Google maps performance is VERY MUCH dependant on how well structured the whole page is.
The biggest performance hit usually comes from repaint/render cycles of the page - caused by the tiles loading / unloading.
Dependant on how the map is placed and how you use it, it's a benefit to position the map element using position:fixed, taking it out of the document flow. Position:absolute can also help, but not as much as 'fixed'.

JavaScript: Initialising Google Maps in an external script

I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('initialize');
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">

make a KML/KMZ layer transparent/opaque

I have been looking for a while for a simple way to make a KML/KMZ layer transparent/opaque using the Google Map API version 3. There are plenty of example out there, but there doesn’t seem be a simple example of making a KML layer opaque. I have provided an example below, can someone help me out with this???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Example 2</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// ***Initialize the Map Function ***
function initialize() {
var latlng = new google.maps.LatLng(0,0);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var polyLayerOptions = {
supressInfoWindows: true,
Opacity: 0.15
};
var polyLayer = new google.maps.KmlLayer
('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', polyLayerOptions);
polyLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There isn't an opacity flag in the KML options, but you can set the color of objects in your KML to be transparent. Google uses a 32 bit color in the form ABGR, where the first byte is the alpha channel or transparency and the next three bytes are regular colors (though not in the standard RGB order that everyone else uses!). For example, a color of #80FF0000 would be a 50% transparent Blue. There doesn't seem to be a way to modify the transparency on the fly in code like you can in Google Earth, you have to update the KML and repost it to your map.

Categories

Resources