Google Map Integration Custom Marker OR Icon
Google Map Integration Custom Marker OR Icon
I don’t think so, take a look at my demo has no api key but it has functionality with custom marker and custom info window. It drives me crazy when things takes less than an hour to built this code.
Have you ever though keeping Google map with fullscreen toggle option? Cool ahhh!… just check out my example.
[symple_toggle title=”Between <head></head> Section”]
<script src=”js/FullScreenControl.js” type=”text/javascript”></script> <!– Fullscreen JS –>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.show_hide’).showHide({
speed: 1000, // speed you want the toggle to happen
easing: ”, // the animation effect you want. Remove this if you dont want an effect
changeText: 1, // if you dont want the button text to change, set this to 0
showText: ‘View’,// the button text to show when a div is closed
hideText: ‘Close’ // the button text to show when a div is open
});
});
</script>
[/symple_toggle]
[symple_toggle title=”Between <body> tag”]
<div id=”map_canvas”> <!– Map will display –>
<div id=”map”> <!– Fullscreen Loading & Fullscreen Buttons area –>
<span style=”color:Gray;”>Loading map…</span> </div>
<!– Fullscreen Loading & Fullscreen Buttons area Ends –>
</div><!– Map Ends display –>
<!– Google Map JS –>
<script src=”http://maps.google.com/maps/api/js?sensor=false” type=”text/javascript”></script>
<script type=”text/javascript”>
/* <![CDATA[ */
window.onload = function() {
var settings = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15,
center: new google.maps.LatLng(40.715618, -74.011133)
};
var map = new google.maps.Map(document.getElementById(“map”), settings);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));
var image = ‘images/marker.png’;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.715618, -74.011133),
map: map,
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: ‘<div class=info><b>Location Title</b><br><img src=”images/barber/1.jpg”><br> Location Descrption – You can add class and define it to CSS<br><br> <b>City:</b> New York’
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map, marker);
});
}
/* ]]> */
</script>
[/symple_toggle]
[symple_toggle title=”The CSS”]
* Map CSS */
#canvas_holder{
position: absolute;
top: 0px;
left: 0px;
width:100%;
}
#map_canvas{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
#map
{
position: relative;
width: 100%;
height:100%;
}
.info
{
width: 370px;
height: 200px;
}
.info img
{
width: 150px;
height: 100px;
}
[/symple_toggle]
The example shown in my demo can be used as fullpage background map as well. Google Map Integration Custom Marker
Subscribe to Newsletter to receive Updates about the Latest Blog Content
About the author