Monthly Archives: September 2015

Show static google map image and link to map with marker

With this snippet you can show a static google map image for a specific location, which is linked to google maps and includes showing a marker in all views.
Don’t forget to change YOUR_GOOGLE_STATIC_MAPS_API_KEY to your api key, which you can get at https://console.developers.google.com by creating a server key and aactivate google maps for this account.


$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
$address = urlencode("Kupferbergterrasse 10, 55116 Mainz");
$request = file_get_contents("https://maps.google.com/maps/api/geocode/json?address=" . $address . "&key=YOUR_GOOGLE_STATIC_MAPS_API_KEY&sensor=false", false, stream_context_create($arrContextOptions));
$json = json_decode($request, true);
$lat = $json['results'][0]['geometry']['location']['lat'];
$lng = $json['results'][0]['geometry']['location']['lng'];
$marker = "color:blue|label:ZIEL|".$lat.','.$lng;
echo '<a href="https://www.google.com/maps/place/'.$address.'"><img src="https://maps.googleapis.com/maps/api/staticmap?center='.$lat.','.$lng.'&zoom=14&size=600x300&markers='.$marker.'&key=YOUR_GOOGLE_STATIC_MAPS_API_KEY"></a>';

demo:

staticmap

Exercise for Frontend-Developer to test PHP-, CSS3- and HTML-skills.

Task: Create a slider from the entries of an an XML-File.

Design draft is here: http://pascha.org/aufgabe/slider.png

XML-File is here: http://pascha.org/aufgabe/comments.xml

Icons & Elements: http://pascha.org/aufgabe/pascha.org-aufgabe-icons.zip

Guidelines:
– You can use jQuery
– The entries in the XML are pointing to facebook or google, so the respective logo should be shown in the slider.
– The Slider should jump from the last to the first entry.
The slider should be draggable and use touchevents.
– The “Read more”-Button (“weiterlesen”) should be linked to the respective page.